Text flutter Container components and assemblies

Before we start, let's write a simple entry file:

   

Later, the basis of the above structure is completed.

 Text Container assembly since the components and are written in the body inside, so the following, first pulled into the form of a body component.

 Container Components

Container assembly in which flutter is a container assembly, as similar to the div html.

Add Center components inside Container assembly, then add Text component, and the above effect is the same.

Container, Text class definitions which are essentially self-assembly, there are many optional named parameters, the parameters used in Conrainer which comprises:

• alignment: Alignment
• decoration: background and border properties
• margin：
• padding
• transfrom
• height
• width
• child

   

Text Component

 Text component used in the following parameters:

• textAlign: text alignment (Center centered, left aligned left, right or right justification justfy alignment)
• textDirection: text direction (ltr Left to right, rtl to left) 
• overflow: word processing mode after exceeding the screen (clip cut, fade fade, ellipsis ellipsis) 
• textScaleFactor: font magnification
• maxLines: maximum number of lines of text display 
• style: font style settings

Wherein TextStyle and optional parameters including the following:

• decoration: decorative lines of text (none no lines, lineThrough line-through, overline dash, underline underline)
• decorationColor: text decoration line color
• decorationStyle: Text style decorative lines ([dashed, dotted] dashed lines, double two lines, solid a solid line, wavy wavy line) 
• wordSpacing: word gap (if it is negative, the word will become more compact
• letterSpacing: letter clearance (if negative, the letter will become more compact)
• fontStyle ：文字样式（italic 斜体，normal 正常体）
• fontSize 
• color 
• fontWeight 

    

 

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
          child: Container(
              child: Text(
                'flutter Container组件和Text组件，flutter Container组件和Text组件，flutter Container组件和Text组件',
                textAlign:TextAlign.left,
                overflow:TextOverflow.ellipsis ,
                // overflow:TextOverflow.fade ,
                maxLines: 2,
                textScaleFactor: 1.8,
                style:TextStyle(
                  fontSize: 16.0,
                  color:Colors.red,
                  // color:Color.fromARGB(a, r, g, b)
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic,
                  decoration:TextDecoration.lineThrough,
                  decorationColor:Colors.white,
                  decorationStyle: TextDecorationStyle.dashed,
                  letterSpacing: 5.0
                )
              ),
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(
                  color: Colors.blue,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(
                //  Radius.circular(150),    //圆形
                  Radius.circular(10),  
                )
              ),
              // padding:EdgeInsets.all(20),
              // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
              margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
              // transform:Matrix4.translationValues(100,0,0)
              // transform:Matrix4.rotationZ(0.3)
              // transform:Matrix4.diagonal3Values(1.2, 1, 1)
              alignment: Alignment.bottomLeft,
          ),
    );
  }
}