之前寫(xiě)過(guò)幾篇dart語(yǔ)言特性的文章，算是英文官方文檔的一個(gè)簡(jiǎn)單翻譯，最近用 flutter 寫(xiě)了一個(gè)領(lǐng)電商平臺(tái)優(yōu)惠券的 app（還有微信小程序，之前的文章有），沒(méi)有上線，有興趣的可以點(diǎn)擊鏈接 鯨魚(yú)精選 下載看看。

最近幾個(gè)月網(wǎng)上的flutter博客文章增長(zhǎng)的速度很快，而且簡(jiǎn)單的flutter app開(kāi)發(fā)確實(shí)技術(shù)含量不需要太高，所以挺糾結(jié)flutter方面的文章到底寫(xiě)不寫(xiě)。。。經(jīng)過(guò)幾天的糾結(jié)之后，決定還是把flutter的文章寫(xiě)下去吧，按自己的思路一篇一篇寫(xiě)。

1 環(huán)境配置

從flutter環(huán)境配置起步，具體步驟可以參考 安裝和環(huán)境配置，描述的挺詳細(xì)的，這里呢針對(duì) windows + androidstudio 平臺(tái)寫(xiě)幾點(diǎn)關(guān)鍵步驟和注意事項(xiàng)。

flutter sdk 下載

下載 windows 平臺(tái)對(duì)應(yīng)的sdk壓縮包，截止到目前是 flutter_windows_v1.7.8+hotfix.4-stable.zip

添加 flutter 環(huán)境變量

選好位置解壓，將 sdk 中的 bin 目錄添加到環(huán)境變量

添加國(guó)內(nèi)鏡像

如果不用國(guó)內(nèi)鏡像的話，后面開(kāi)發(fā)中使用依賴會(huì)下載的很慢很慢，甚至下載不下來(lái)。目前 flutter中文網(wǎng) 上提供了兩個(gè)鏡像地址：Flutter社區(qū)鏡像、上海交通大學(xué)Linux用戶組。推薦使用Flutter社區(qū)的鏡像，我之前用上海交大那個(gè)還是不行，特別慢，還總失敗。

使用方法是，新建兩個(gè)用戶或者系統(tǒng)變量，變量名分別為 FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL，對(duì)應(yīng)的值分別是 https://storage.flutter-io.cn，https://pub.flutter-io.cn。

//Flutter 社區(qū)鏡像
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn

//上海交通大學(xué) Linux 用戶組
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

配好國(guó)內(nèi)鏡像之后，以后下載的依賴會(huì)放在 flutter\.pub-cache\hosted\pub.flutter-io.cn 文件夾中，如果開(kāi)發(fā)中依賴下載不下來(lái)，可以看看有沒(méi)有該文件夾，如果沒(méi)有應(yīng)該是鏡像配置有問(wèn)題。

flutter 環(huán)境檢查

執(zhí)行 flutter doctor 命令檢查flutter的環(huán)境，一般都會(huì)提示幾個(gè)問(wèn)題

1. Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
   ：這種是因?yàn)閍ndroid sdk和buildtoos版本低導(dǎo)致的，打開(kāi)AS，更新到錯(cuò)誤信息里面描述的具體版本即可
2. Android license status unknown：錯(cuò)誤中有提示，運(yùn)行 flutter doctor --android-licenses 命令即可，有提示輸入 y 即可。
3. 電腦上如果有安裝 android studio/vscode/idea 的話，會(huì)提示這個(gè)ide工具沒(méi)有安裝 flutter 插件，android studio上打開(kāi) setting 界面的 plugin 界面，搜索 flutter ，點(diǎn)擊安裝，完成后重啟即可。你使用那個(gè)ide工具開(kāi)發(fā)就解決哪一個(gè)就行，其他工具的報(bào)錯(cuò)可以不用管。

經(jīng)過(guò)以上幾步，flutter的環(huán)境就算是搭建好了，我本身是做android開(kāi)發(fā)的，所以android studio 用的比較順手，所以后面文章中開(kāi)發(fā)工具默認(rèn)就是指的android studio。

flutter初始工程

工程創(chuàng)建

前面再as中安裝了flutter插件，所以再打開(kāi)as的時(shí)候會(huì)有 Start a new Fluuter project 的選項(xiàng)，按照下面的順序就可以創(chuàng)建flutter工程了

1. 點(diǎn)擊 Start a new Fluuter project
2. 點(diǎn)擊 Flutter Application
3. 填寫(xiě) 工程名字、flutter sdk 的路徑、工程路徑、工程簡(jiǎn)介
4. 填寫(xiě) 包名，這里還可以選擇是否添加 kotlin 和 swift 的支持
5. 點(diǎn)擊 finish 即可完成工程創(chuàng)建。

主要文件夾和文件

工程創(chuàng)建完成打開(kāi)后，主要的文件夾和文件如下：

• android目錄：這是存放android平臺(tái)代碼的目錄
• ios目錄：存放ios平臺(tái)代碼的目錄
• lib目錄：這個(gè)是重點(diǎn)，以后寫(xiě)的 dart 文件都是在這個(gè)目錄下面，默認(rèn)會(huì)有一個(gè) main.dart 文件
• pubspec.yaml 文件：工程的配置文件，管理各種組件、字體、資源的依賴等。

這時(shí)候可以先不用著急看代碼，點(diǎn)擊運(yùn)行，就可以在手機(jī)或者模擬其上跑起來(lái)了。第一次運(yùn)行時(shí)間稍微長(zhǎng)一些，后面會(huì)很快的，這個(gè)就是flutter提供的 hotreload 熱重載特性，開(kāi)發(fā)過(guò)程中確實(shí)特別爽，改動(dòng)代碼之后按下 crtl+s 即可自動(dòng)更新到手機(jī)上運(yùn)行。

下面咱們看下默認(rèn)生成的 main.dart 文件和 pubspec.yaml 中的代碼，前者是具體的業(yè)務(wù)代碼文件，后者是app的配置文件以及管理庫(kù)依賴、資源等

初始代碼分析

main.dart 文件中的代碼不多，但是注釋很多，我這里把英文注釋刪掉，精簡(jiǎn)成了中文的。這里先把代碼貼出來(lái)。

//導(dǎo)入 material 包，android material design 風(fēng)格
import 'package:flutter/material.dart';

//這是 app 的入口
void main() => runApp(MyApp());

/**
 * flutter 中絕大多數(shù)東西都是 widget，主要有兩種，無(wú)狀態(tài)的（StatelessWidget）、有狀態(tài)的（StatefulWidget）
 */
class MyApp extends StatelessWidget {
  // StatelessWidget 主要的就是這個(gè) build 方法，主要用來(lái)執(zhí)行 widget 的構(gòu)建
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//MateriaApp 是flutter提供的android平臺(tái)風(fēng)格的庫(kù)
      title: 'Flutter Demo',
      theme: ThemeData(//可以配置主題
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 有狀態(tài)的 widget
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  //主要的方法就是 createState() ，用來(lái)創(chuàng)建一個(gè) State
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//這就是和上面 StatefulWidget 綁定的 State
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    //有狀態(tài)的widget，可以使用 setState 方法來(lái)更新?tīng)顟B(tài)，然后 widget 樹(shù)會(huì)根據(jù)最新的狀態(tài)重新構(gòu)建
    setState(() {
      _counter++;
    });
  }

  //這是 State 的核心方法，用來(lái)執(zhí)行 widget 的構(gòu)建
  @override
  Widget build(BuildContext context) {
    return Scaffold(//Scaffold 是android 風(fēng)格app的一個(gè)骨架 widget，里面可以配置 appbar等
      appBar: AppBar(
        // 這里的widget就是上面的MyHomePage對(duì)象
        title: Text(widget.title),
      ),
      body: Center(//一個(gè)單子元素在中間的布局widget
        child: Column(//豎直布局widget
          mainAxisAlignment: MainAxisAlignment.center,//主方向的對(duì)齊方式
          children: <Widget>[//子元素列表
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

具體代碼的含義在注釋中已經(jīng)說(shuō)明，至于更詳細(xì)的內(nèi)容后面文章再說(shuō)，這里只大概感受一下flutter代碼，通過(guò)上面的代碼中的注釋基本上可以理解flutter開(kāi)發(fā)的一個(gè)基本流程：

1. 導(dǎo)入依賴的包
2. 提供一個(gè)app入口方法實(shí)現(xiàn) void main() => runApp(MyApp());
3. 根據(jù)需要使用 StatelessWidget 或者 StatefulWidget ，覆寫(xiě)內(nèi)部的 build()/createState() 方法，方法中使用各種widget構(gòu)建的app

下面來(lái)看 pubspec.yaml 文件，同樣的是代碼不多，注釋很多，已經(jīng)精簡(jiǎn)成中文，理解該文件的大概作用沒(méi)問(wèn)題。

需要注意的是在該文件編寫(xiě)時(shí)一定要注意縮進(jìn)和空格！

# app 名字
name: flutter_app
# app 描述
description: A new Flutter application.

# 版本號(hào) x.y.z+m 其中 m 是構(gòu)建版本，可以使用 --build-name/--build-number 構(gòu)建參數(shù)覆蓋，在 android 中 build-name 當(dāng)作 versionName使用，build-number 當(dāng)作versionCode使用
version: 1.0.0+1

# flutter 環(huán)境配置
environment:
  sdk: ">=2.1.0 <3.0.0"

# 庫(kù)依賴管理
dependencies:
  flutter:
    sdk: flutter

  # 一些第三方庫(kù)，后續(xù)自己選擇的庫(kù)直接在下面添加即可
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter


# 下面是 flutter 的一些配置
flutter:

  # 使用android 平臺(tái)的 material design 風(fēng)格
  uses-material-design: true

  # 添加本地資源
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # 添加字體
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

除了上述兩個(gè)文件外，比較重要的就是平臺(tái)相關(guān)的代碼了，比如android平臺(tái)對(duì)應(yīng)的android目錄中的文件，其實(shí)就是一個(gè)正常的as module，如果需要修改app的圖標(biāo)什么的或者需要和android原生平臺(tái)通信，可以進(jìn)入該目錄修改添加相關(guān)代碼，也可以在 android 目錄上右鍵，點(diǎn)擊 Flutter— open android module in android studio> 選項(xiàng)，啟動(dòng)一個(gè)心得as窗口，當(dāng)成普通android module 編寫(xiě)代碼，這就屬于原生開(kāi)發(fā)的范疇了，這里不再贅述。

總結(jié)

通過(guò)上面的步驟和介紹，到這里應(yīng)該可以從感官層面理解flutter開(kāi)發(fā)的一個(gè)基本流程，具體的內(nèi)容后續(xù)文章會(huì)逐一講解。

另外和文章開(kāi)頭提到的優(yōu)惠券app鯨魚(yú)精選 對(duì)應(yīng)的還有一個(gè)微信小程序，可以掃下方二維碼體驗(yàn)下，算是本人的一種支持吧，這里先行謝過(guò)~

鯨魚(yú)精選