Text Shadows in Flutter

In this post we are going to learn how to set Text Shadow in flutter

Let's start

Step 1: Create Flutter Application

Step 2:
Create textshadow.dart file and add below code

class TextShadow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Shadows',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Shadows in Flutter'),
        ),
        body: Center(
          child: Text('Text Shadows in Flutter'),
        ),
      ),
    );
  }
}

 

Step 3: Create TextStyle

Add below code to apply text style for Text widget

body: Center(
    child: Text('Text Shadows in Flutter',
    textAlign: TextAlign.center,
    style: TextStyle(
        ),
    ),
),

 

Step 4: Creating a Text Shadow

body: Center(
    child: Text('Text Shadows in Flutter',
    textAlign: TextAlign.center,
    style: TextStyle(
    fontSize: 20,
        shadows: [
            Shadow(
                blurRadius: 10.0,
                color: Colors.pink,
                offset: Offset(5.0, 5.0),
                ),
            ],
        ),
    ),
),

 

Step 5: Run Application

TextShadow in Flutter

Multiple Shadows on a Single Widget

We can also perform multiple shadows on single widget

style: TextStyle(
    fontSize: 40,
    shadows: [
                Shadow(
                  blurRadius: 10.0,
                  color: Colors.pink,
                  offset: Offset(5.0, 5.0),
                ),
                Shadow(
                  color: Colors.amber,
                  blurRadius: 10.0,
                  offset: Offset(-10.0, 5.0),
                ),
              ],
    ),

 

Then the output will come like below

TextShadow in Flutter