This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Text control Text

Class TextDemo extends StatelessWidget {final TextStyle _textStyle = TextStyle(fontSize: 16.0, color: color.red,); final String _lector = 'Flutter'; Final String _title = 'Dark '; @override Widget build(BuildContext context) {return Text('$_lector -- $_title: Flutter Chinese is the largest Flutter developer exchange and learning platform in China, dedicated to building a Chinese community for Flutter development. It's easy to find code examples, project examples, and a dedicated translation of the latest documentation. ', textAlign: TextAlign.center, style: _textStyle, maxLines: 3, overflow: TextOverflow.ellipsis, ); }}Copy the code

  • TextStyle: Sets the font size, color, font style, etc.
  • The $variable: YesThe $variableConcatenates strings in the form of.
  • textAlign: Sets the text center, left, or right.
  • maxLines: Sets the maximum line number for text display.
  • overflow: Display endless text interception method.

Variable text control RichText

class RichTextDemo extends StatelessWidget { @override Widget build(BuildContext context) { return RichText( text: const TextSpan( text: 'Flutter', style: TextStyle( fontSize: 30, color: Colors.black, ), children: [ TextSpan( text: 'Chinese website ', style: TextStyle(fontSize: 16, color: color.red,), TextSpan(text:' is the largest Flutter developer learning platform in China ', style: TextStyle( fontSize: 20, color: Colors.blue, ), ), ] ), ); }}Copy the code

In RichText, text is the type of TextSpan, and you can add children to TextSpan. Children is a List of TextSpan types. We can set the text to be displayed and the text style style separately in each TextSpan. The final display is the patchwork of text from each TextSpan. You can do rich text presentations.

Container

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: <Widget>[
          Container(
            color: Colors.yellow,
            child: Icon(
              Icons.add,
              size: 45,
            ),
            padding: EdgeInsets.all(30),
            margin: EdgeInsets.all(20),
            height: 230,
          ),
        ],
      ),
    );
  }
Copy the code

Container is a UIView control in iOS. If a Container is not set to a width and height, the size of the Container is held up by its inner child controls. Padding is the inside margin, margin is the outside margin.

alignment

const Alignment(this.x, this.y) : assert(x ! = null), assert(y ! = null);Copy the code

Container has an important attribute alignment. X and Y indicate the position of the child control in the current Container. X is -1, 0, and 1 indicate that the child control is left, center, and right, respectively. Y is -1, 0, 1, respectively, indicating that the child control is in the top, middle, and bottom.

Flutter layout

The layout of a Flutter has three important sub-components: Row, Column, and Stack, representing horizontal, vertical, and multiple levels respectively, which correspond to the X, Y, and Z axes of the axis.

Column

class LayoutColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: Alignment(0.0, 0.0),
      child: Column(
        children: [
          Container(color: Colors.red, child: Icon(Icons.add, size: 90,)),
          Container(color: Colors.yellow, child: Icon(Icons.timelapse, size: 60,)),
          Container(color: Colors.blue, child: Icon(Icons.error, size: 30,)),
        ],
      ),
    );
  }
}
Copy the code

Row

class LayoutRowDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: GreenAccent, alignment: Alignment(1.0, 0.0), child: Row(mainAxisAlignment: mainAxisAlignment. End, children: [ Container(color: Colors.red, child: Icon(Icons.add, size: 90,)), Container(color: Colors.yellow, child: Icon(Icons.timelapse, size: 60,)), Container(color: Colors.blue, child: Icon(Icons.error, size: 30,)), ], ), ); }}Copy the code

MainAxisAlignment indicates the starting direction of the main axis. Row is arranged from left to right by default. When mainAxisAlignment is set to mainAxisAlignment. When the layout mode is Row, the X attribute of Alignment has no effect on horizontal directions.

mainAxisAlignment: MainAxisAlignment.spaceBetween

  • spaceBetween: indicates that the child controls are aligned in the main axis and the remaining space is evenly distributed among the child controls.

mainAxisAlignment: MainAxisAlignment.spaceAround

  • spaceAround: The remaining space is evenly distributed around the child controls.

mainAxisAlignment: MainAxisAlignment.spaceEvenly

  • spaceEvenly: The remaining space is evenly divided between the sub-parts and the sub-parts to the edge of the screen.

CrossAxisAlignment Cross axis layout

The cross axis is the vertical direction of the spindle, and the cross axis of the Row component is the longitudinal direction. The layout is similar in other directions.

crossAxisAlignment: CrossAxisAlignment.start

  • CrossAxisAlignment.startThe idea controls are laid down from the top of the content in the cross axis.

class LayoutRowDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors. GreenAccent, alignment: Alignment(1.0, 0.0), child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [ Container(color: Colors.red, child: Text('Hello', style: TextStyle(fontSize: 15))), Container(color: Colors.yellow, child: Text('Flutter', style: TextStyle(fontSize: 30))), Container(color: Colors.blue, child: Text('Demo', style: TextStyle(fontSize: 60))), ], ), ); }}Copy the code

When crossAxisAlignment crossAxisAlignment. Baseline must be used together with textBaseline attribute, when used to set the baseline of text alignment.

Expanded

class LayoutExpandedDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( GreenAccent: alignment (1.0, 0.0), child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [ Expanded(child: Container(color: Colors.red, child: Text('Hello', style: TextStyle(fontSize: 15)))), Expanded(child: Container(color: Colors.yellow, child: Text('Flutter', style: TextStyle(fontSize: 30)))), Expanded(child: Container(color: Colors.blue, child: Text('Demo', style: TextStyle(fontSize: 60)))), ], ), ); }}Copy the code

As you can see in the figure above, Expanded child controls are divided equally by screen size along the main axis. Setting the width of the child control does not work when the main axis is landscape. Similarly, setting the height of the child control does not work when the main axis is portrait.

Stack

class LayoutStackDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.greenAccent, alignment: const Alignment(0, 0), child: Stack( children: [ Container(color: Colors.red, width: 200, height: 200, child: Icon(Icons.add)), Container(color: Colors.yellow, width: 100, height: 100, child: Icon(Icons.timelapse)), Container(color: Colors.blue, width: 50, height: 50, child: Icon(Icons.error)), ], ), ); }}Copy the code

In a Stack layout, child controls in a Container are stacked from inside out.

Positioned

children: [
          Positioned(child: Container(color: Colors.red, width: 200, height: 200, child: Icon(Icons.add))),
          Positioned(child: Container(color: Colors.yellow, width: 100, height: 100, child: Icon(Icons.timelapse)),left: 5,),
          Positioned(child: Container(color: Colors.blue, width: 50, height: 50, child: Icon(Icons.error)),right: 10,),
        ],
Copy the code

When you use the toy, you can set the attribute of left or right, which is of type double, and you can set the distance between the child and the left or the right of the parent.

AspectRatio

class LayoutAspectRatioDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.greenAccent, alignment: const Alignment(0, 0), child: Container( color: Colors.blue, height: 200, child: const AspectRatio(aspectRatio: 1 / 2, child: Icon(Icons.add)) ), ); }}Copy the code

Container sets an AspectRatio child to affect the AspectRatio of the Container. When the height of the Container is set to 200, the width of the Container is automatically set to 100.