[Flutter] The Flutter Text control implements underline, strikethrough, dotted line, bold, italic

Article directory

- I. Introduction
- 2. Introduction to Flutter Text Control
- 3. Style setting of Flutter Text control
- - 1. Set the underscore
  - 2. Set strikethrough
  - 3. Set dashed line
  - 4. Set bold
  - 5. Set italics
- 4. Complete code
- V. Summary

1. Foreword

In Flutter development, we often need to set various styles for the Text control, including but not limited to underline, strikethrough, dotted line, bold and italic, etc. The settings of these styles can help us better display text content and improve user experience. This article will detail how to implement these effects in Flutter 3.10.0 or higher. After reading this article, you will master the following knowledge points:

Basic use of Flutter Text controls
How to set the underline, strikethrough, dash, bold and italic styles of the Text control
How to apply these styles in real projects

Are you curious about Flutter and want to learn more about it? Then, Flutter from zero to one basic introduction to application launch guide will be your best choice! Here, you can find comprehensive Flutter learning resources, including code samples and in-depth analysis. Are you wondering how to build apps with Flutter? All the answers are in our column! Don’t hesitate anymore, the content of the column will continue to be updated, and the price will increase accordingly. Join now and enjoy the best price! Let’s explore the world of Flutter together! Want to know more? Click here to view the Flutter Developer 101 Getting Started booklet guide. In addition, we have a dedicated discussion group, you can click here join our discussion group to communicate and learn with other Flutter learners.

2. Introduction to Flutter Text Control

The Text control is one of the most commonly used controls in Flutter, and it is used to display simple, consistent text in your application. The Text control only needs a string as a parameter to display text on the screen. For example:

Text('Hello, Flutter!')

The above code will display the text “Hello, Flutter!” on the screen. However, the function of the Text control is far more than that. We can also achieve various complex text effects by setting its style properties.

3. Style setting of Flutter Text control

In Flutter, we can set the style of the Text control through the TextStyle class. Here are the specific steps on how to set underline, strikethrough, dash, bold and italic styles:

1. Set underline

In Flutter, we can add an underline to the Text control through the decoration attribute. For example:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

2. Set strikethrough

Similarly, we can add a strikethrough to the Text control through the decoration attribute. For example:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
  ),
)

3. Set dashed line

Although Flutter’s TextStyle class does not directly provide the property to set the dashed line, we can achieve this effect by using a third-party library. For example, we can use the dotted_line library to add dotted lines to Text controls. The specific usage method will be introduced in detail in the following code examples.

4. Set bold

We can set the font weight of the Text control through the fontWeight property. For example:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

5. Set italics

We can set the font style of the Text control through the fontStyle attribute. For example:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontStyle: FontStyle. italic,
  ),
)

4. Complete code

First, you need to add a dependency on the dotted_line library in your Flutter project’s pubspec.yaml file. Add the following code to the dependencies section of the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter

  dotted_line: ^3.2.2

Then, run the flutter pub get command to download and install the dotted_line library.

Here is the full working code.

// Need to import dotted_line library first
import 'package:flutter/material.dart';
import 'package:dotted_line/dotted_line.dart';

void main() {<!-- -->
  runApp(MyApp());
}

class MyApp extends StatelessWidget {<!-- -->
  @override
  Widget build(BuildContext context) {<!-- -->
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Style Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets. all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Hello, Flutter! (with underline)',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                ),
              ),
              SizedBox(height: 20),
              Text(
                'Hello, Flutter! (with lineThrough)',
                style: TextStyle(
                  decoration: TextDecoration.lineThrough,
                ),
              ),
              SizedBox(height: 20),
              DottedLine(
                direction: Axis.horizontal,
                lineLength: double.infinity,
                lineThickness: 1.0,
                dashLength: 4.0,
                dashColor: Colors. black,
                dashRadius: 0.0,
                dashGapLength: 4.0,
                dashGapColor: Colors.transparent,
                dashGapRadius: 0.0,
              ),
              SizedBox(height: 20),
              Text(
                'Hello, Flutter! (with bold)',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 20),
              Text(
                'Hello, Flutter! (with italic)',
                style: TextStyle(
                  fontStyle: FontStyle. italic,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. Summary

In this article, we detailed how to set the underline, strikethrough, dash, bold and italic styles of Text controls in Flutter. We first introduced the basic use of the Text control, and then explained in detail how to set various styles through the TextStyle class. Finally, we provide several complete code examples showing how to apply these styles in real projects.