Flutter – Text

文字(TEXT)是使用最普遍的 Widget，除了 text 的屬性外，還有一些樣式、對齊及每行字數等等的設定。此 Widget 只能實現一種設定，如果一行文字有多種樣式需設定時，請改用 RichText。相關的說明請見程式碼。

Text is the most common Widget in Flutter. The common properties of the Text Widget are style, align, maxline…etc.,if you want setting multiple styles in one line, please use RichText Widget.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title:'Starter Template',
      home: Scaffold(
        appBar: AppBar(       
          title:Text('123'),               
        ),
        body:Column(children: [     
          Container(
            child: Text(
              "Hello Flutter! How's going",  //文字內容
                style: TextStyle(            //屬性設定  
                fontSize: 32.0,              //字體大小
                fontStyle: FontStyle.normal, //字體樣式 
                color:Color.fromARGB(200, 255, 128, 128), //文字顏色，使用 RGB
                decoration:TextDecoration.underline ,     //線條：使用底線
                decorationColor:Colors.green[300],        //線條顏色
                decorationStyle:TextDecorationStyle.wavy  //線條樣式 波浪              
              ),
            ) ,
          ),
          Container(           
            child:RichText(
              text:TextSpan(
                text:"Hello Fluttre! ",
                style: TextStyle(
                  fontSize: 32.0,
                  fontStyle: FontStyle.normal ,
                  fontWeight: FontWeight.w100,            //寬度設定
                  color:Colors.blueGrey,              
                  decoration:TextDecoration.underline ,
                  decorationColor:Colors.green[300],  
                  decorationStyle:TextDecorationStyle.double   //線條樣式 雙底線                       
                ),
                children: [
                  TextSpan(
                    text:"How's",
                    style:TextStyle(
                      color: Colors.red,
                      fontStyle: FontStyle.italic ,
                      fontWeight: FontWeight.w200,
                      decorationStyle:TextDecorationStyle.dotted   //線條樣式 點 
                    ),
                  ),
                  TextSpan(
                    text: " going",
                    style: TextStyle(
                      color:Colors.black87,
                      decoration:TextDecoration.underline ,
                      decorationColor:Colors.green[300], 
                      fontWeight: FontWeight.bold,
                      decorationStyle:TextDecorationStyle.dashed     //線條樣式 虛線
                    
                    )
                  ),  
                ] 
              ),                    
            ),      
        ),   
        ]
        ),   
        
    ),
    );
  }
}

• color : control the color of text. color: Colors.block , set the color to black.
• fontSize : set the font size of text. fontSize: 40.0
• fontWeight: This property specifies the weight of text , the value between 100 and 900  : fontWeight: FontWeight.w100.
• fontStyle: set slant or normal to font. fontStyle: FontStyle.italic .
• textAlign: text alignment.
• maxLine: maximum number of lines for the text .
• TextDecoration: a linear decoration to draw near the text. It has 4 choices: lineThrough, overline, underline and none.
• TextDecorationStyle: to paint the text decorations, it has 5 choices: dashed , dotted  , double , solid  and wavy.
• TextDecorationColor: set the color of TextDecoration
  
  

• color : 設定文字的顏色
• fontSize : 設定字型大小。 fontSize: 40.0
• fontWeight: 設定字體寬度，寬度介於100~900間。 fontWeight: FontWeight.w100
• fontStyle: 設定文字樣式 fontStyle: FontStyle.italic .
• textAlign:文字對齊
• maxLine: 設定文字行數
• TextDecoration: 設定線條位置
• TextDecorationStyle: 設定線條樣式
• TextDecorationColor: 設定線條顏色
  
  

更詳細的說明請參考 Flutter API 網頁
參考書籍  Beginning Flutter

Please let me know if there are any mistakes in the documents
To be continued….