一、新建Flutter專案

1. 開啟Andorid Studio ，出現下面的介面，選擇第二項，新建Flutter專案。

   

2. 開啟第二個視窗後，選擇第一個選項Flutter Application(flutter應用)，點選Next。

   

3. 分別填入或選擇專案名稱、Flutter SDK安裝路徑、專案儲存路徑與專案描述，然後點選Next。

   

4. 設定包名，Finish。

   

5. 這步完成後，系統就會自動為我們建立一個Flutter專案。

   

二、Text Widget 文字元件的使用

開始之前一定先給自己一個暗示：Flutter一切皆元件。下面是使用了一個最簡單的Text元件來實現的HelloWold程式碼。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/*void main(){
  //runApp函式將根元件顯示在螢幕上
  runApp(MyApp());
}*/

/**
 * 根元件
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MaterialApp title",
      home: ScaffoldWidget(),
    );
  }
}
 

Scaffold的實現程式碼：

/**
 * Scaffold
 */
class ScaffoldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold：是Material中主要的佈局元件
    return Scaffold(
      //appBar：在其Scaffold頂部顯示一個應用欄
      appBar: AppBar(
        title: Text("Scaffold AppBar"),
      ),
      //body：顯示主要內容,Center：使其子元件在中間位置
      body: Center(child: TextWidget()),
    );
  }
}
 

TextWidget實現程式碼：

/**
 * Text元件
 */
class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Text元件
    return Text(
        "2019年10月1日是中華人民共和國成立70週年紀念日。慶祝中華人民共和國成立70週年大會10月1日舉行，習主席將發表重要講話。慶祝大會後",
        //文字對齊方式
        textAlign: TextAlign.center,
        //最多顯示行數
        maxLines: 2,
        //超出文字處理方式
        overflow: TextOverflow.ellipsis,
        //文字風格
        style: TextStyle(
            //字型大小
            fontSize: 25.0,
            //字型顏色
            //color: Color.fromARGB(255, 255, 0, 0),
            color: Colors.red,
            //修飾器
            decoration: TextDecoration.underline,
            //修飾風格
            decorationStyle: TextDecorationStyle.dashed));
  }
}

實現效果如下圖：

其中用到的常用屬性包括TextAlign、maxLines、overflow與style。

• TextAlign屬性，文字的對齊方式，它的屬性值有如下幾個：
  • center：文字以居中形式對齊（預設）。
  • left與right：左(右)對齊，經常使用，讓文字居左(右)進行對齊。
  • start與end：以文字開始(結束)位置進行對齊，類似於左(右)對齊。
• maxLines屬性，設定最多顯示的行數。
• overflow屬性是用來設定文字溢位時，如何處理,有下面幾個常用的值：
  • clip：直接切斷，剩下的文字就沒有了（預設）。
  • ellipsis：在後邊顯示省略號。
  • fade：溢位的部分會進行一個漸變消失的效果。
• style裡屬性的內容比較多，這裡是設定了：字型大小為25.0,顏色為紅色,並且有一個下劃線，下劃線效果為虛線。
  • fontSize：字型大小。
  • color：字型顏色。
  • decoration：怎麼修飾。
  • decorationStyle：修飾的風格