Hey friends, In our previous tutorial we have discussed about creating StrikeThrough text in flutter, Current tutorial is one more step ahead. Today we would learn about styling or changing the StrikeThrough text line color in flutter in android iOS application. We would use the decorationColor styling prop to change the line through original color.
Contents in this project Flutter Change StrikeThrough Text Line Color in Android iOS :-
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 and here we would call our main MyApp() class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold Widget -> Center Widget -> Container Widget. Now here we would create our main Text widget with decoration: TextDecoration.lineThrough and
decorationColor: Colors.red style. Here I’m using the red color you can use Color as per your choice.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( margin: const EdgeInsets.all(10), child: Text( 'StrikeThrough Text Style in Flutter iOS Android App', style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: Colors.red, decorationStyle: TextDecorationStyle.solid, fontSize: 28, fontWeight: FontWeight.bold, color: Colors.blue), textAlign: TextAlign.center, )), ))); } |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( margin: const EdgeInsets.all(10), child: Text( 'StrikeThrough Text Style in Flutter iOS Android App', style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: Colors.red, decorationStyle: TextDecorationStyle.solid, fontSize: 28, fontWeight: FontWeight.bold, color: Colors.blue), textAlign: TextAlign.center, )), ))); } } |
Screenshot :-
