Shadow effects are very common among developers and one of them is Drop shadow effect. In flutter we have a Shadow widget with 3 different arguments to add drop shadow effect on text. This widget applies inside Text Style. We will be discussing all shadow widget arguments below.
Shadow widget syntax:
Shadow(
offset,
blurRadius,
color,
)
Properties of Shadow Widget:
- offset: We have to pass Offset(double dx, double dy). Here dx means shadow effect on horizontal area and dy means shadow effect on vertical effect.
- blurRadius: To apply Gaussian blur effect on text.
- color: Shadow color in which the shadow draw.
Flutter Add Drop Shadow Effect on Text:
1. Defining a Text widget with shadow effect applied on it.
Text(
'Demo Text',
style: TextStyle(fontSize: 58, color: Colors.cyan, shadows: [
Shadow(
offset: Offset(5.0, 2.0),
blurRadius: 5.2,
color: Colors.pink,
),
]),
)
2. Source code for main.dart file:
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text(
'Demo Text',
style: TextStyle(fontSize: 58, color: Colors.cyan, shadows: [
Shadow(
offset: Offset(5.0, 2.0),
blurRadius: 5.2,
color: Colors.pink,
),
]),
))),
);
}
}
Screenshot of app:
Comments
Post a Comment