There are basically 6 types of underline text styling available on Text widget. Single underline, A part of text underline, Wavy underline, dashed underline, dotted underline and double underline text. Underline is basically used to highlight a particular area in Text in Text widget so app user can easily focus on that particular word. So in this tutorial we would Flutter Create Single Double Dotted Dashed Underline Style Text in Android iOS Flutter App Example Tutorial.
Contents in this project Flutter Create Single Double Dotted Dashed Underline Style Text in Android iOS Flutter App Example Tutorial:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() inbuilt method and here we would call our main MyApp root class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root class named as MyApp extends StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Scaffold widget -> Center Widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("All Type of Underline Text in Flutter"), ), body: Center(child: Column( children: <Widget>[ ] ) ) )); } |
5. Creating padding widget -> Text widget. Now we would apply the Text styling and use the decoration: TextDecoration.underline property to apply the single underline on Text widget Text.
|
1 2 3 4 5 6 7 8 9 |
Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Sample Underline Text', style: TextStyle( decoration: TextDecoration.underline, fontSize: 25 ), )), |
6. Creating another padding widget -> Text widget. Now we would use the TextSpan widget of text because we do not want to make multiple Text widgets in single styling and the apply decoration: TextDecoration.underline on last word. This would make the single world underline in complete sentence line.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text.rich( TextSpan( text: 'A Part Of Text ', style: TextStyle(fontSize: 25), children: <TextSpan>[ TextSpan( text: 'Underline', style: TextStyle( decoration: TextDecoration.underline, )), ], ), )), |
7. Creating another padding widget along with Text widget now we would apply the decorationStyle: TextDecorationStyle.wavy property along with decoration: TextDecoration.underline to apply the wavy style underline on Text.
|
1 2 3 4 5 6 7 8 9 10 |
Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Wavy Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.wavy, fontSize: 25 ), )), |
8. Creating 3 more Padding widget with Text widgets and apply decorationStyle: TextDecorationStyle.double , decorationStyle: TextDecorationStyle.dashed and decorationStyle: TextDecorationStyle.dotted styling to make Double underline text, dashed underline text and dotted underline text.
|
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 27 28 29 30 31 32 |
Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Double Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.double, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Dashed Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Dotted Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dotted, fontSize: 25 ), )), |
9. 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
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("All Type of Underline Text in Flutter"), ), body: Center(child: Column( children: <Widget>[ Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Sample Underline Text', style: TextStyle( decoration: TextDecoration.underline, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text.rich( TextSpan( text: 'A Part Of Text ', style: TextStyle(fontSize: 25), children: <TextSpan>[ TextSpan( text: 'Underline', style: TextStyle( decoration: TextDecoration.underline, )), ], ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Wavy Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.wavy, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Double Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.double, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Dashed Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, fontSize: 25 ), )), Padding( padding: EdgeInsets.fromLTRB(0, 20, 0, 20), child: Text( 'Dotted Underline Text', style: TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dotted, fontSize: 25 ), )), ] ) ) )); } } |
Screenshot:
