Hello friends, One of our user once ask me to make tutorial on the Shadow Effect Text topic. So I though why be late, let’s make it. So I start learning about How I can put drop shadow effect text in flutter. Then I found that in Flutter we can make this quite easily. All we have to do is first make 1 Text widget then in the TextStyle property we would use the Shadow widget directly. Shadow widget will construct a Shadow effect around the text widget. The default shadow effect color is Black. So in this tutorial we would learn about Example of Creating Drop Shadow Effect Text in FLUTTER DART.
Contents in this project Example of Creating Drop Shadow Effect Text in FLUTTER DART :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method. Here we would call our main MyApp widget class.
|
1 |
void main() => runApp(App()); |
3. Creating our main App extends StatelessWidget class.
|
1 2 3 4 5 |
class App extends StatelessWidget { } |
4. Now we would make the Text widget along with Shadow widget with its Child to make the Drop Shadow Effect.
Shadow Widget properties :-
- blurRadius :-The standard deviation of the Gaussian to convolve with the shadow’s shape.
- color :- Color of Shadow.
- offset :- The displacement of the shadow from the casting element. Positive x/y offsets will shift the shadow to the right and down, while negative offsets shift the shadow to the left and up. The offsets are relative to the position of the element that is casting it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Text( 'Drop Shadow Text in Flutter', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, shadows: [ Shadow( blurRadius: 8.0, color: Colors.red, offset: Offset(3.0, 4.0), ), ], ), ), |
5. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import 'package:flutter/material.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Drop Shadow Text in Flutter"), ), body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const <Widget>[ Center( child: Text( 'Drop Shadow Text in Flutter', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, shadows: [ Shadow( blurRadius: 8.0, color: Colors.red, offset: Offset(3.0, 4.0), ), ], ), ), ), ], ), ))), ); } } |
Screenshot :-
