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

Article Directory

I. Introduction

In the development of Flutter, 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 achieve 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 column guide . In addition, we also have a dedicated discussion group, you can click here to 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, which is used to display simple, consistent text in the 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 TextStyleset the style of the Text control through the class. Here are the specific steps on how to set underline, strikethrough, dash, bold and italic styles:

1. Set the underscore

In Flutter, we can decorationadd an underline to the Text control through the property. For example:

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

2. Set strikethrough

Similarly, we can decorationadd a strikethrough to the Text control through the property. For example:

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

3. Set dashed line

Although Flutter's TextStyleclass 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 dotted_linethe library to add a dashed line to a Text control. The specific usage method will be introduced in detail in the following code examples.

4. Set bold

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

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

5. Set italics

We can fontStyleset the font style of the Text control through the property. For example:

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

4. Complete code

First, you need to add the library dependency in your Flutter project's pubspec.yamlfile . Add the following code dotted_lineto the section pubspec.yamlof the file :dependencies

dependencies:
  flutter:
    sdk: flutter

  dotted_line: ^3.2.2

Then, run flutter pub getthe command to download and install dotted_linethe library.

Here is the full working code.

// 需要先引入 dotted_line 库
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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

V. Summary

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