本文主要介绍在 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：实战小技巧