• 點(diǎn)擊下方的安裝包，獲取 stable 發(fā)行通道的 Flutter SDK 最新版本：
  • flutter_windows_3.3.8-stable.zip
  • 要查看其他發(fā)行通道和以往的版本，請(qǐng)參閱 SDK 版本列表 頁面
• 將壓縮包解壓，然后把其中的 flutter 目錄整個(gè)放在你想放置 Flutter SDK 的路徑中（例如 C:\src\flutter）
• 更新 path 環(huán)境變量，在開始菜單的搜索功能鍵入「env」，然后選擇 編輯系統(tǒng)環(huán)境變量。在 用戶變量 一欄中，檢查是否有 Path 這個(gè)條目：
  • 如果存在這個(gè)條目，以 ; 分隔已有的內(nèi)容，加入 flutter\bin 目錄的完整路徑。
  • 如果不存在的話，在用戶環(huán)境變量中創(chuàng)建一個(gè)新的 Path 變量，然后將 flutter\bin 所在的完整路徑作為新變量的值

如果你不想安裝指定版本的安裝包。可以忽略步驟 1 和 2。從 GitHub 上的 Flutter repo 獲取源代碼，并根據(jù)需要，切換到指定的分支或標(biāo)簽

C:\src>git clone https://github.com/flutter/flutter.git -b stable

Text("Hello world",
  textAlign: TextAlign.left,
);

Text("Hello world! I'm Jack. "*4,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

Text("Hello world",
  textScaleFactor: 1.5,
);

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    background: Paint()..color=Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutter.dev",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

ElevatedButton(
  child: Text("normal"),
  onPressed: () {},
);

TextButton(
  child: Text("normal"),
  onPressed: () {},
)

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

ElevatedButton.icon(
  icon: Icon(Icons.send),
  label: Text("發(fā)送"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
TextButton.icon(
  icon: Icon(Icons.info),
  label: Text("詳情"),
  onPressed: _onPressed,
),

• 在工程根目錄下創(chuàng)建一個(gè)images目錄，并將圖片 aaa.png 拷貝到該目錄。

• 在 pubspec.yaml 中的 flutter 部分添加如下內(nèi)容：

  assets:
    - images/aaa.png
  

  注意: 由于 yaml 文件對(duì)縮進(jìn)嚴(yán)格，所以必須嚴(yán)格按照每一層兩個(gè)空格的方式進(jìn)行縮進(jìn)，此處 assets 前面應(yīng)有兩個(gè)空格。

• 加載該圖片

  Image(
    image: AssetImage("images/aaa.png"),
    width: 100.0
  );
  

  Image 也提供了一個(gè)快捷的構(gòu)造函數(shù) Image.asset 用于從 asset 中加載、顯示圖片：

  Image.asset("images/aaa.png",
    width: 100.0,
  )
  

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

Image 也提供了一個(gè)快捷的構(gòu)造函數(shù) Image.network 用于從網(wǎng)絡(luò)加載、顯示圖片：

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

Switch(
  value: true,//當(dāng)前狀態(tài)
  onChanged:(value){
    // 重新構(gòu)建頁面  
  },
),

TextField(
    autofocus: true,
    onChanged: (v) {
      print("onChange: $v");
    }
)

模糊進(jìn)度條(會(huì)執(zhí)行一個(gè)動(dòng)畫)

LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),

進(jìn)度條顯示 50%

LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

模糊進(jìn)度條(會(huì)執(zhí)行一個(gè)旋轉(zhuǎn)動(dòng)畫)

CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),

進(jìn)度條顯示 50%，會(huì)顯示一個(gè)半圓

CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

線性進(jìn)度條高度指定為 3

SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),

圓形進(jìn)度條直徑指定為 100

SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

在實(shí)際開發(fā)中，Container常常用于對(duì)一個(gè)組件進(jìn)行包裝修飾。

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  alignment: Alignment.center,
  child: Text('Hello world'),
),

將 Contianer 大小固定為 100 * 100， 背景色為藍(lán)色。把 Text 包裹在 Container 中，并將其居中

列布局(Column),可以將多個(gè)子組件沿著垂直的方向擺放(豎的擺放)

// 將container 和 button 擺放到同一列。
Column(
   children: [
     Container(
       width: 100,
       height: 100,
       color: Colors.blue,
       alignment: Alignment.center,
       child: Text('Hello world'),
     ),
     ElevatedButton(
       onPressed: () {},
       child: Text('Button'),
     ),
   ],
),

行布局(Row)，可以將多個(gè)組件沿水平的方向擺放。

Row(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: const Text('1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: const Text('2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: const Text('3'),
    ),
  ],
),

在同一行擺放 3 個(gè) Button

將子組件從左到右依次排列，當(dāng)空間不足時(shí)自動(dòng)換行。

Wrap(
  children: [
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),  
    FlutterLogo(),
  ],
),

顯示多個(gè) Flutter 的 logo 并自動(dòng)換行

Stack 可以將一多個(gè)子組件疊在一起顯示。堆疊順序按照children屬性中的列表依次堆疊擺放，默認(rèn)將子控件沿左上角對(duì)齊。 需要控制子控件位置可以嵌套Positoned控件。

Stack(
  children: [
    Container(
      height: 300,
      width: 300,
      color: Colors.blue,
    ),
    Container(
      height: 200,
      width: 200,
      color: Colors.black,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),

依次堆疊 300*300 的藍(lán)色色塊、200*200 的黑色色塊、100*100 的黃色色塊

Align組件用于決定子組件對(duì)齊方式

// 使用Align將Button 居中在Container中
Container(
  width: 100,
  height: 100,
  color: Colors.green,
  child: Align(
    alignment: Alignment.center,
    child: ElevatedButton(
      onPressed: () {}, 
      child: Text('Center'),
    ),
  ),
),

Center 組件實(shí)際上繼承于Align。用于專門劇中。

//與 Align中代碼效果一致
Container(
  width: 100,
  height: 100,
  color: Colors.green,
  child: Center(
    child: ElevatedButton(
      onPressed: () {}, 
      child: Text('Center'),
    ),
  ),
),

Flex 的用法與 Row 或 Column 類似，但只需要額外傳入 direction 參數(shù)

• Row 和 Column 組件都繼承 Flex 組件
• 設(shè)置 direction 為 Axis.horizontal 表示水平方向(Row)，為 Axis.vertical則為垂直方向(Column)

垂直方向依次擺放3個(gè)flutter logo

Flex(
  direction: Axis.vertiacl,
  children；[
    Fluterlogo(),
    Fluterlogo(),
    Fluterlogo(),
  ],
),

水平方向依次擺放 3 個(gè) flutter logo

Flex(
  dirction: Axis.horizontal,
  children: [
    Flutterlogo(),
    Flutterlogo(),
    Flutterlogo(),
  ],
),

Spacer 用于在布局中留白

Row(
  children: [
    Text('Item'),
    Spacer(),
    FlutterLogo(),
  ],
),

例如，需要文本和圖標(biāo)位于一個(gè)行的兩端，而中間留白時(shí)。就可以使用 Spacer

ListView 是一個(gè)支持滾動(dòng)的列表組件。該組件默認(rèn)支持上下滑動(dòng)。 ListView的默認(rèn)構(gòu)造函數(shù)，會(huì)立即初始化children中的所有子widget，無法動(dòng)態(tài)加載。

ListView(
  children: [
    Text('1'),
    Text('2'),
    Text('3'),
    Text('4'),
  ],
),

需要?jiǎng)討B(tài)加載，則可以使用 ListView.builder()命名構(gòu)函數(shù)。

// 動(dòng)態(tài)生成4個(gè)Text
ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    return Text('$index');
  },
  itemCount: 4,
),

需要在對(duì)ListView中的Item添加分割線，則可以借助ListView.separated()。

// separatorBuilder 函數(shù)用于在元素之間插入分割線。
// 也可以返回其他widget。該widget會(huì)被插入各個(gè)元素之間。
ListView.separated(
  itemBuilder: (BuildContext context, int index) {
    return Text('$index');
  },
  itemCount: 4,
  separatorBuilder: (BuildContext context, int index) {
    // 使用Divider widget 畫一條粗為5，顏色為紅色的線
    return const Divider(
      height: 5,
      thickness: 5,
      color: Colors.red,
    );
  },
),

使用PageView可以實(shí)現(xiàn)整屏頁面滾動(dòng),默認(rèn)為水平方向翻頁。與ListView類似。

• pageSnapping參數(shù)可以設(shè)置滑動(dòng)時(shí)Page停留在任意位置。
• scrollDirection參數(shù)設(shè)置滾動(dòng)方向(默認(rèn)為水平方向)。

PageView(
  pageSnapping: false, // 取消頁面固定
  scrollDirection: Axis.vertical, // 設(shè)置為垂直方向滾動(dòng)
  children: [
    for (int i = 0; i < 4; i++)
      Container(
        color: Colors.red[i % 4 * 100],
      )
  ],
),

使用PageView.builder()命名構(gòu)造，可以動(dòng)態(tài)加載頁面。與ListView.builder()類似。

PageView.builder(
  pageSnapping: false,
  scrollDirection: Axis.vertical,
  itemBuilder: (BuildContext context, int index) => Container(
    color: Colors.red[index % 4 * 100],
  ),
),