All Types Of Underline Text In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

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.

All Types Of Underline Text In Flutter Android App

All Types Of Underline Text
Complete Code For All Types Of Underline Text In Flutter 
main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              backgroundColor: Colors.green,
              title: Text("All Type of Underline Text"),
            ),
            body: Center(child: Column(
                children: <Widget>[
                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: Text(
                        'Sample Underline',
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            fontSize: 20
                        ),
                      )),
                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: Text.rich(
                        TextSpan(
                          text: 'A Part Of ',
                          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',
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.wavy,
                            fontSize: 20
                        ),
                      )),

                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: Text(
                        'Double Underline',
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.double,
                            fontSize: 20
                        ),
                      )),
                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: Text(
                        'Dashed Underline',
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.dashed,
                            fontSize: 20
                        ),
                      )),
                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                      child: Text(
                        'Dotted Underline',
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.dotted,
                            fontSize: 20
                        ),
                      )),
                ]
            )
            )
        ));
  }
}

Related Post