text shadow

Quick Tip – How to add shadow to Text in Flutter

Basics /

How to add shadow to Text in Flutter

flutter text shadow single

In Flutter, a text shadow is a visual effect that adds a shadow to text. You can use text shadows to make the text stand out or to create a specific visual effect.

To add a shadow to text in Flutter, you can use the Text widget and specify the style property with a TextStyle object that has the shadows property set to a list of Shadow objects. Each Shadow object represents a single shadow and has the following properties:

  • blurRadius: The blur radius of the shadow in pixels. A larger blur radius will result in a softer, more diffuse shadow.
  • color: The colour of the shadow.
  • offset: The offset of the shadow in pixels. This specifies how far the shadow should be displaced from the text.

Here’s an example of how you can add a shadow to text in Flutter:

Text(
  'flutterassets.com',
  style: TextStyle(
    fontSize: 40,
    fontWeight: FontWeight.w900,
    color: Colors.white,
    shadows: [
      Shadow(
        color: Colors.black,
        offset: Offset(2.0, 2.0),
        blurRadius: 2.0,
      ),
    ],
  ),
)

This code will create a Text widget with the text “flutterassets.com”, with a font size of 40, a font-weight of 900 (bold), and a white colour. It will also apply a shadow to the text, with a black colour, an offset of 2 pixels in both the horizontal and vertical directions, and a blur radius of 2 pixels.

The resulting text should look like it has a black shadow behind it, giving it a 3D effect. You can adjust the shadow’s colour, offset, and blur radius to achieve the desired effect.

Here is another example.

Color.fromARGB(128, 0, 0, 0) mean colour from ARGB (Alpha Red Green Blue) where alpha 0 means transparent and 255 means opaque. Alpha value 128 is half transparent.

            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 40, color: Colors.green,
                fontFamily: "Genos",
                fontWeight: FontWeight.w900,
                shadows: [
                  Shadow(
                    color: Color.fromARGB(128, 0, 0, 0),
                    offset: Offset(10, 10),
                    blurRadius: 5,
                  )
                ],
              ),
            ),
text shadow

How you can add multiple shadows to Text in Flutter

You can also use the TextStyle class to apply multiple shadows to the text. In this case, you can use the shadows property of the TextStyle to specify a list of Shadow objects to apply to the text. Here’s an example:

Text(
  'Multiple shadows',
  style: TextStyle(
    fontSize: 40,
    fontWeight: FontWeight.w900,
    color: Colors.white,
    shadows: [
      Shadow(
        blurRadius: 10.0,
        color: Colors.black,
        offset: Offset(5.0, 5.0),
      ),
      Shadow(
        blurRadius: 10.0,
        color: Colors.black,
        offset: Offset(-5.0, -5.0),
      ),
    ],
  ),
)

Related Posts