Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money.

πŸ“ [Flutter] learning to form a record, [programmer essential knowledge]

πŸ“” — Basic components of Flutter [01] Text!

1. Write at the front

This article introduces the basic syntax of Flutter and concludes with the introduction of the basic components of Flutter. Today we will learn the Text of Flutter.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

2. Flutter rendering engine

Flutter has its own rendering mechanism. Unlike RN, which relies on the native UI, Flutter’s updated rendering is called incremental rendering. There is a tree of rendered objects in the rendering engine. I’m not going to go into details here.

We are going to start with the basic component ->Text, which is similar to UILabel in OC.

3. The Text component

  • material

Dart, which imports commonly used materials, is similar to UIKit in OC.

import 'package:flutter/material.dart';

Copy the code
  • runApp

In iOS, APP is run in Window, runApp is used in Flutter. Add components to this, so let’s look at the Text component first.

void main(a){

 runApp(
    Center(
      child: Text(
        "hello world! Base component Text,maxLines maximum number of lines,TextStyle style property :color,
        textDirection: TextDirection.ltr,
        maxLines: 3,
        style: TextStyle(fontSize: 26,color: Colors.white,backgroundColor: Colors.red),
      ),
    )
  );
}
Copy the code
  • CenterThe equivalent ofOCIn theview.childThe equivalent ofsubViewThe meaning of
  • TextThe equivalent ofUILabel
  1. Create a Text

The Text() constructor is created

  1. The Text property
TextDirection Text alignment Textalign.center aligns the text to the center of the container. Textalign.end aligns the text on the container's trailing edge. Textalign.justify stretches the ending line of text to fill the width of the container. Textalign.left aligns the text on the left edge of the container. Textalign. right aligns the text on the right edge of the container. Textalign.start aligns the text on the leading edge of the container. MaxLines Overflow handles word overflow TextOverflow. Clip the spilled text to repair its container. Textoverflow. ellipsis uses ellipsis to indicate that the text has spilled. Textoverflow. fade Fades the spilled text to transparency. TextScaleFactor Size coefficientCopy the code
  1. TextStyle style property
Color Indicates the text color. Text decoration: Underscore (TextDecoration. Underline) on line (TextDecoration. Overline) delete line (TextDecoration. LineThrough) no (TextDecoration. None) DecorationStyle draw text decoration style: draw a dotted line TextDecorationStyle. Draw a dotted line TextDecorationStyle dashed. Draw two lines TextDecorationStyle dotted.doubleDraw a solid line TextDecorationStyle. Solid draw a sinusoidal line (tilde) TextDecorationStyle. Wavy fontWeight to use when drawing text font size: Fontweight. bold Common fonts have heavier than normal weight. W700 fontweight. normal default font size. W200 light fontweight. w300 light fontweight. w300 light fontStyle font variant: Italic uses italic FontStyle. Normal uses upright textBaseline to align the text with the horizontal line: Textbaseline. ideographic: Alphabetic baseline is a standard alphabetic baseline. FontSize fontSize letterSpacing the space between horizontal letters in logical pixels. You can use negative values to make the letters closer together. The spacing (in logical pixels) added between words. Negative values can be used to make words closer together. Background Text Background color Foreground shadows of the text foreground shadows achieve some special effects. Background text Foreground shadows of the text foreground shadowsCopy the code
  • Code performance

More effect, you can according to the above some properties to set, here is not a demonstration.

4. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up πŸ‘πŸŒΉ

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹