Flutter Create Single Double Dotted Dashed Underline Style Text

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.

2. Create void main runApp() inbuilt method and here we would call our main MyApp root class.

3. Creating our main Root class named as MyApp extends StatelessWidget.

4. Creating Widget Build area -> Scaffold widget -> Center Widget -> Column 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.

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.

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.

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.

9. Complete source code for main.dart file:

Screenshot:

Flutter Create Single Double Dotted Dashed Underline Style Text

Leave a Reply

Your email address will not be published. Required fields are marked *