Hello friends, It’s been a whole month since I had posted a tutorial on website. Sorry for late posting tutorial guys. I have been a little busy on my flutter project at work. But now the project is completed and I’m free again. So today we would learn about a small thing in flutter known as StrikeThrough. StrikeThrough text is used to notify the user about changing a price tag and new discount is applied on text. In StrikeThrough text a horizontal line will be draw above the Text from middle of it. So in this tutorial we would learn about Create StrikeThrough Text in Flutter Android iOS Example.
Contents in this project Create StrikeThrough Text in Flutter Android iOS Example :-
1. Open your project’s main.dart file and import material.dart package in your project.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would import our main class MyApp.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main class MyApp extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold widget -> Center Widget -> Container widget .
|
1 2 3 4 5 6 7 8 9 10 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( margin: const EdgeInsets.all(10), child: ), ))); } |
5. Creating Text widget with style decoration TextDecoration.lineThrough to make the StrikeThrough text.
|
1 2 3 4 5 6 7 8 |
Text( 'Creating StrikeThrough Text in Flutter iOS Android App', style: TextStyle( decoration: TextDecoration.lineThrough, fontSize: 28, color: Colors.red), textAlign: TextAlign.center, ) |
6. 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 |
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( 'Creating StrikeThrough Text in Flutter iOS Android App', style: TextStyle( decoration: TextDecoration.lineThrough, fontSize: 28, color: Colors.red), textAlign: TextAlign.center, )), ))); } } |
Screenshot in Android device :
