How to add shadow to text in Flutter
In Flutter, adding shadows to text elements can enhance the visual appeal and give our user interface a sense of depth. Shadows can make the text stand out and improve the overall user experience. In this Answer, we will explore various methods to add shadows to text in Flutter.
Constructor and parameters
The Shadow widget provides a constructor with various parameters to customize its behavior and layout.
const Shadow({
Color color = const Color(_kColorDefault),
Offset offset = Offset.zero,
double blurRadius = 0.0
})
Let's take a closer look at each parameter and its purpose:
The
color: An optional parameter that represents the color of the shadow.The
offset: An optional parameter representing the shadow's horizontal and vertical offset from the text or widget.The
blurRadius: Also, an optional parameter represents the amount of blur applied to the shadow.
The default shadow has a black color, zero offset, and zero blur.
Adding Shadow to text
Flutter provides the TextStyle widget, which allows us to define various text styles, including shadows. The shadow property accepts a list of Shadow objects, allowing us to customize the effect.
Text('Educative Answer',style: TextStyle(shadows: [Shadow(color: Colors.black, // Choose the color of the shadowblurRadius: 2.0, // Adjust the blur radius for the shadow effectoffset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the shadow),],),)
After running the above code, we will be able to see the following output:
Adding multiple shadows to text
We can add multiple shadows in the text by just providing a list of Shadow widgets in the shadows property of the TextStyle widget as shown in the code below:
Text('Educative Answer',style: TextStyle(shadows: [Shadow(color: Colors.black, // Choose the color of the first shadowblurRadius: 2.0, // Adjust the blur radius for the first shadow effectoffset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the first shadow),Shadow(color: Colors.blue, // Choose the color of the second shadowblurRadius: 4.0, // Adjust the blur radius for the second shadow effectoffset: Offset(-2.0, 2.0), // Set the horizontal and vertical offset for the second shadow),],),)
After running the above code, we will be able to see the following output:
Code example
We will use multiple shadows in the code below to style text using the TextStyle widget in the style property of the Text.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Shadow Example'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'Educative Answer',
style: TextStyle(
fontSize: 25.0,
shadows: [
Shadow(
color: Colors.black, // Choose the color of the first shadow
blurRadius: 2.0, // Adjust the blur radius for the first shadow effect
offset: Offset(2.0, 2.0), // Set the horizontal and vertical offset for the first shadow
),
Shadow(
color: Colors.blue, // Choose the color of the second shadow
blurRadius: 4.0, // Adjust the blur radius for the second shadow effect
offset: Offset(10.0, 10.0), // Set the horizontal and vertical offset for the second shadow
),
], // ending bracket of shadow property
),
), // ending bracket of Text widget
),
],
), // ending bracket of Row Widget
),
);
}
}
Code explanation
Lines 20–37: The
Textwidget is styled usingTextStyle, with a font size of25.0and two shadow effects provided using theshadowsproperty.Lines 25–29: The first shadow is colored black, with a blur radius of
2.0, and offset by(2.0, 2.0)pixels horizontally and vertically.Lines 30–34: The second shadow is colored blue, with a blur radius of
4.0, and offset by(10.0, 10.0)pixels horizontally and vertically.
Conclusion
We have learned the process of adding shadow effects to text in Flutter, a powerful way to enhance the visual appeal and depth of the user interface. Using the TextStyle widget with the shadows property, developers can effortlessly apply single or multiple shadow effects to text elements.
Free Resources
