Flutter Text Shadow - How can i add Text Shadow?

Last updated Apr 29, 2021

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?

Article Contributed By :

5372 Views

Projects By category