本文主要介紹在 Flutter 開發中的一些實用技巧。git

技巧1：flutter packages get 失敗

當項目在執行 flutter packages get 等操做時，可能會遇到「Waiting foranother flutter command to release the startup lock」的提示。github

是由於 Flutter 命令須要等上一個任務執行完成。若是出現長時間卡住的狀況，能夠經過打開 Flutter SDK 目錄下的 /bin/cache/，而後找到 lockfile 文件，將其刪除後並從新運行就不會被提示打斷。web

技巧2：快速建立 StatelessWidget 和 StatefulWidget

當編寫 Flutter 代碼時，在編輯框裏輸入 stl 能夠自動彈出建立 StatelessWidget 的模板選項。shell

而當輸入 stf 時，會彈出建立 StatefulWidget 的模板選項。api

技巧3：獲取狀態欄高度和禁止字體縮放

通常咱們能夠經過 MediaQuery.of(context).size 獲取到屏幕的大小，另外，在 MediaQuery 內部有一個 MediaQueryData 的參數，這個參數保存了不少設備的相關信息，如其中的 padding.top 表明了狀態欄的高度，因此經過以下代碼的方式，就能夠在須要的地方獲取到狀態欄高度而且不須要 context：安全

MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top
複製代碼

若是在開發的時候發現有些控件是從狀態欄開始佈局的，能夠在外層包一個 SafeArea，而 SafeArea 內部就是利用 MediaQueryData，針對頂部狀態欄和 iPhone X 以上機型的底部安全距離作了 padding 處理，在默認狀況下 Scaffold 的 AppBar 內部就使用了 SafeArea。markdown

MediaQueryData 還能夠處理字體縮放。在 MediaQueryData 內的 textScaleFactor 表示系統字體的縮放信息，默認大小是跟隨系統而變化的。less

若是不但願應用跟隨系統字體縮放而縮放，能夠在須要的頁面下進行嵌套設置，將 textScaleFactor 設置爲 1 來禁止應用內的字體縮放：異步

MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
          .copyWith(textScaleFactor: 1),
      child: new Container(),
    );
複製代碼

技巧4：實現頁面異步加載

Flutter 能夠經過 FutureBuilder 或者 StreamBuilder 簡單實現頁面的異步加載。async

FutureBuilder 和 StreamBuilder 是經過 Future 和 Stream 獲取數據後實現頁面佈局。以下代碼所示：

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const Test({Key key}) : super(key: key);

  Future<String> mockNetworkData() async {
    await Future.delayed(Duration(seconds: 3));
    return "success";
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Scaffold(
        body: Center(
          child: FutureBuilder<String>(
            future: mockNetworkData(),
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              // 根據結果返回不一樣頁面
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('start...');
                case ConnectionState.active:
                case ConnectionState.waiting:
                  return SizedBox(
                    width: 60,
                    height: 60,
                    child: CircularProgressIndicator(
                        valueColor:
                        new AlwaysStoppedAnimation(Color(0xff000000))),
                  );
                case ConnectionState.done:
                  if (snapshot.hasError)
                    return Text('Error: ${snapshot.error}');
                  return Text('Result: ${snapshot.data}');
              }
              return null; // unreachable
            },
          ),
        ),
      ),
    );
  }
}
複製代碼

技巧5：Flutter sdk 版本升級或者降級到指定版本

升級 Flutter 版本

flutter upgrade
複製代碼

升級到指定版本

flutter upgrade v1.20.0-7.0.pre
複製代碼

降級到指定版本（須要進入 flutter 根目錄執行 git 命令）

git reset --hard f139b11009aeb8ed2a3a3aa8b0066e482709dde3
複製代碼

命令中的 hard 爲當前版本提交的 code 碼，好比 8af6b2f038c1172e61d418869363a28dffec3cb4

flutter Tags 列表：Tags

Flutter：實戰小技巧