Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Flutter Text Shadow - How can i add Text Shadow?

In this flutter example we are going to learn how to add Text shadow to the flutter widget. To set Text Shadow in flutter we will use the shadows property of the Text widget. Shadow is the Flutter shadow widget which can apply different shaodws to the widgets.

 

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

Tags: Text Shadow, Flutter Shadow, How can i add Text shadow in flutter?

 


1933 Views

Author: RRTutors

Flutter Questions

Android Questions