Example of shutter text component

figure ：

  Entrance file ：C:\Users\user\StudioProjects\myflutter\lib\main.dart

import 'package:flutter/material.dart';
import 'package:myflutter/basic/text.dart';

String mytitle = ' home page ';

void main(List<String> args) {
  return runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 1. First , Program entry  flutter  Top level components of 
    return MaterialApp(
        title: "hello myflatter", //  Title Applied in task manager ;
        //  Theme styles for applications 
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
        ),
        home: my_flutter(title: mytitle), //  The main content of the application 
        debugShowCheckedModeBanner: false //  Whether the application displays the main upper corner debugging mark 
        );
  }
}

// ignore: camel_case_types
class my_flutter extends StatelessWidget {
  const my_flutter({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    // 2. secondly , Program entry  flutter  Scaffold components 
    return Scaffold(
      //  The head component of the application 
      appBar: AppBar(
        //  The middle header of the application 
        title: Text(title),
        // leading  It is the icon in the upper corner of the main 
        leading: IconButton(
          onPressed: () {
            print('This is home!');
          },
          icon: const Icon(Icons.view_headline),
        ),
        //  The icon group on the right side of the application header （ Multiple icons ）
        actions: [
          //  Icon 1
          IconButton(
            onPressed: () {
              print('This is share!');
            },
            icon: const Icon(Icons.share),
          ),
          //  Icon 2
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 0),
            child: IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('This is search!');
              },
            ),
          ),
          //  Icon 3
          IconButton(
            onPressed: () {
              print('This is more!');
            },
            icon: const Icon(Icons.more_vert),
          )
        ],
      ),
      // 3. This is the main component entry of the entire application content ！！
      body: const text_demo(),
    );
  }
}

text Component example ：C:\Users\dai51\StudioProjects\myflutter\lib\basic\text.dart

import 'package:flutter/material.dart';

/// Text
///     TestDirection（ The text direction ）
///
///     TextStyle（ Text style ）
///         Colors（ text color ）
///         FontWeight（ The font size ）
///         FontStyle（ Font style ）
///
///     TextAlign（ Text alignment ）
///     TextOverflow（ Text overflow ）
///     maxLines（ Specify the number of lines to display ）
///
/// RichText  And  TextSpan（ Declare different styles for a piece of text ）
///

class text_demo extends StatelessWidget {
  const text_demo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// Column  Example component , Multiple contents can be passed in ,
    ///  Use when transferring multiple contents  children,child  Only one content can be passed in .
    return Column(
      children: [
        const Text(
          "Flutter  Bring innovation to application development ：  Just a code base , Can build 、 Testing and release are applicable to mobile phones 、Web、 Beautiful applications for desktop and embedded platforms .",
          textDirection:
              TextDirection.ltr, //  The text direction ：ltr  yes  left to right  From left to right ;rtl  From right to left 
          style: TextStyle(
            fontSize: 30,
            color: Colors.red,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.lineThrough, // Text modification ： Center line 
            decorationColor: Colors.blue,
          ),
          textAlign: TextAlign.right,
          maxLines: 3, //  The maximum number of lines of text displayed 
          overflow: TextOverflow.ellipsis, //  Text overflow shows three dots 
          textScaleFactor: 1.5, //  Text magnification 
        ),
        //  Multiline text component  RichTixt  amount to  HTML  Of  <div></div>  label 
        RichText(
          // TextSpan  amount to  HTML  Of  <span></span>  label 
          text: const TextSpan(
              text: "hello",
              style: TextStyle(
                fontSize: 40,
                color: Colors.deepOrange,
              ),
              // children  You can display multiple lines of text .
              children: [
                TextSpan(
                    text: "flutter",
                    style: TextStyle(
                      fontSize: 40,
                      color: Colors.blue,
                    )),
                TextSpan(
                    text: " Hello world ！",
                    style: TextStyle(
                      fontSize: 40,
                      color: Colors.blue,
                    )),
              ]),
        ),
      ],
    );
  }
}

Execution effect ：