How to add shadow to text in Flutter

In Flutter, adding shadows to text elements can enhance the visual appeal and give our user interface a sense of depth. Shadows can make the text stand out and improve the overall user experience. In this Answer, we will explore various methods to add shadows to text in Flutter.

Constructor and parameters

The Shadow widget provides a constructor with various parameters to customize its behavior and layout.

const Shadow({
  Color color = const Color(_kColorDefault),
  Offset offset = Offset.zero,
  double blurRadius = 0.0
})

Let's take a closer look at each parameter and its purpose:

  • The color: An optional parameter that represents the color of the shadow.

  • The offset: An optional parameter representing the shadow's horizontal and vertical offset from the text or widget.

  • The blurRadius: Also, an optional parameter represents the amount of blur applied to the shadow.

The default shadow has a black color, zero offset, and zero blur.

Adding Shadow to text

Flutter provides the TextStyle widget, which allows us to define various text styles, including shadows. The shadow property accepts a list of Shadow objects, allowing us to customize the effect.

Text(
  'Educative Answer',
  style: TextStyle(
    shadows: [
      Shadow(
        color: Colors.black,      // Choose the color of the shadow
        blurRadius: 2.0,          // Adjust the blur radius for the shadow effect
        offset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the shadow
      ),
    ],
  ),
)

After running the above code, we will be able to see the following output:

Adding a simple shadow to the text
Adding a simple shadow to the text

Adding multiple shadows to text

We can add multiple shadows in the text by just providing a list of Shadow widgets in the shadows property of the TextStyle widget as shown in the code below: 

Text(
  'Educative Answer',
  style: TextStyle(
    shadows: [
      Shadow(
        color: Colors.black, // Choose the color of the first shadow
        blurRadius: 2.0, // Adjust the blur radius for the first shadow effect
        offset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the first shadow
      ),
      Shadow(
        color: Colors.blue, // Choose the color of the second shadow
        blurRadius: 4.0, // Adjust the blur radius for the second shadow effect
        offset: Offset(-2.0, 2.0), // Set the horizontal and vertical offset for the second shadow
      ),
    ],
  ),
)

After running the above code, we will be able to see the following output:

Adding multiple shadows to the text
Adding multiple shadows to the text

Code example

We will use multiple shadows in the code below to style text using the TextStyle widget in the style property of the Text. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Shadow Example'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(20.0),
              child: Text(
                'Educative Answer',
                style: TextStyle(
                  fontSize: 25.0,
                  shadows: [
                    Shadow(
                      color: Colors.black, // Choose the color of the first shadow
                      blurRadius: 2.0, // Adjust the blur radius for the first shadow effect
                      offset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the first shadow
                    ),
                    Shadow(
                      color: Colors.blue, // Choose the color of the second shadow
                      blurRadius: 4.0, // Adjust the blur radius for the second shadow effect
                      offset: Offset(10.0, 10.0), // Set the horizontal and vertical offset for the second shadow
                    ),
                  ], // ending bracket of shadow property
                ),
              ), // ending bracket of Text widget
            ),
          ],
        ), // ending bracket of Row Widget
      ),
    );
  }
}

Code explanation

  1. Lines 20–37: The Text widget is styled using TextStyle, with a font size of 25.0 and two shadow effects provided using the shadows property.

  2. Lines 25–29: The first shadow is colored black, with a blur radius of 2.0, and offset by (2.0, 2.0) pixels horizontally and vertically.

  3. Lines 30–34: The second shadow is colored blue, with a blur radius of 4.0, and offset by (10.0, 10.0) pixels horizontally and vertically.

Conclusion

We have learned the process of adding shadow effects to text in Flutter, a powerful way to enhance the visual appeal and depth of the user interface. Using the TextStyle widget with the shadows property, developers can effortlessly apply single or multiple shadow effects to text elements.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved