In this example, we are going to show you the way to change the font shadow of Text widget in Flutter. Font shadow gives more vibrance look on text. See the example below for more details:
Text(
"Lorem Ipsum is simply dummy text.",
style: TextStyle(
shadows: [
Shadow(
offset: Offset(2.0, 2.0), //position of shadow
blurRadius: 6.0, //blur intensity of shadow
color: Colors.black.withOpacity(0.8), //color of shadow with opacity
),
//add more shadow with different position offset here
]
),
)
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Text Shadow"),
backgroundColor: Colors.deepPurpleAccent,
),
body: Container(
padding: EdgeInsets.all(20),
child: Text(
"Lorem Ipsum is simply dummy text.",
style: TextStyle(
fontSize: 58,
height: 1.2, //line height 150% of actual height
color: Colors.lightGreen,
fontWeight: FontWeight.bold,
shadows: [
Shadow(
offset: Offset(2.0, 2.0), //position of shadow
blurRadius: 6.0, //blur intensity of shadow
color: Colors.black.withOpacity(0.8), //color of shadow with opacity
),
//add more shadow with different position offset here
]
),
)
)
);
}
}
In this way, you can set font shadow on Text Widget of Flutter.
Please Wait...
No any Comments on this Article