flutter【12】開發環境配置+初始工程講解

之前寫過幾篇dart語言特性的文章，算是英文官方文檔的一個簡單翻譯，最近用 flutter 寫了一個領電商平臺優惠券的 app（還有微信小程序，之前的文章有），沒有上線，有興趣的可以點擊鏈接 鯨魚精選 下載看看。

最近幾個月網上的flutter博客文章增長的速度很快，而且簡單的flutter app開發確實技術含量不需要太高，所以挺糾結flutter方面的文章到底寫不寫。。。經過幾天的糾結之後，決定還是把flutter的文章寫下去吧，按自己的思路一篇一篇寫。

1 環境配置

從flutter環境配置起步，具體步驟可以參考 安裝和環境配置，描述的挺詳細的，這裏呢針對 windows + androidstudio 平臺寫幾點關鍵步驟和注意事項。

flutter sdk 下載

下載 windows 平臺對應的sdk壓縮包，截止到目前是 flutter_windows_v1.7.8+hotfix.4-stable.zip

添加 flutter 環境變量

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

添加國內鏡像

如果不用國內鏡像的話，後面開發中使用依賴會下載的很慢很慢，甚至下載不下來。目前 flutter中文網 上提供了兩個鏡像地址：Flutter社區鏡像、上海交通大學Linux用戶組。推薦使用Flutter社區的鏡像，我之前用上海交大那個還是不行，特別慢，還總失敗。

使用方法是，新建兩個用戶或者系統變量，變量名分別爲 FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL，對應的值分別是 https://storage.flutter-io.cn，https://pub.flutter-io.cn。

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

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

配好國內鏡像之後，以後下載的依賴會放在 flutter\.pub-cache\hosted\pub.flutter-io.cn 文件夾中，如果開發中依賴下載不下來，可以看看有沒有該文件夾，如果沒有應該是鏡像配置有問題。

flutter 環境檢查

執行 flutter doctor 命令檢查flutter的環境，一般都會提示幾個問題

1. Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
   ：這種是因爲android sdk和buildtoos版本低導致的，打開AS，更新到錯誤信息裏面描述的具體版本即可
2. Android license status unknown：錯誤中有提示，運行 flutter doctor --android-licenses 命令即可，有提示輸入 y 即可。
3. 電腦上如果有安裝 android studio/vscode/idea 的話，會提示這個ide工具沒有安裝 flutter 插件，android studio上打開 setting 界面的 plugin 界面，搜索 flutter ，點擊安裝，完成後重啓即可。你使用那個ide工具開發就解決哪一個就行，其他工具的報錯可以不用管。

經過以上幾步，flutter的環境就算是搭建好了，我本身是做android開發的，所以android studio 用的比較順手，所以後面文章中開發工具默認就是指的android studio。

flutter初始工程

工程創建

前面再as中安裝了flutter插件，所以再打開as的時候會有 Start a new Fluuter project 的選項，按照下面的順序就可以創建flutter工程了

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

主要文件夾和文件

工程創建完成打開後，主要的文件夾和文件如下：

• android目錄：這是存放android平臺代碼的目錄
• ios目錄：存放ios平臺代碼的目錄
• lib目錄：這個是重點，以後寫的 dart 文件都是在這個目錄下面，默認會有一個 main.dart 文件
• pubspec.yaml 文件：工程的配置文件，管理各種組件、字體、資源的依賴等。

這時候可以先不用着急看代碼，點擊運行，就可以在手機或者模擬其上跑起來了。第一次運行時間稍微長一些，後面會很快的，這個就是flutter提供的 hotreload 熱重載特性，開發過程中確實特別爽，改動代碼之後按下 crtl+s 即可自動更新到手機上運行。

下面咱們看下默認生成的 main.dart 文件和 pubspec.yaml 中的代碼，前者是具體的業務代碼文件，後者是app的配置文件以及管理庫依賴、資源等

初始代碼分析

main.dart 文件中的代碼不多，但是註釋很多，我這裏把英文註釋刪掉，精簡成了中文的。這裏先把代碼貼出來。

//導入 material 包，android material design 風格
import 'package:flutter/material.dart';

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

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

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

  final String title;

  //主要的方法就是 createState() ，用來創建一個 State
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    //有狀態的widget，可以使用 setState 方法來更新狀態，然後 widget 樹會根據最新的狀態重新構建
    setState(() {
      _counter++;
    });
  }

  //這是 State 的核心方法，用來執行 widget 的構建
  @override
  Widget build(BuildContext context) {
    return Scaffold(//Scaffold 是android 風格app的一個骨架 widget，裏面可以配置 appbar等
      appBar: AppBar(
        // 這裏的widget就是上面的MyHomePage對象
        title: Text(widget.title),
      ),
      body: Center(//一個單子元素在中間的佈局widget
        child: Column(//豎直佈局widget
          mainAxisAlignment: MainAxisAlignment.center,//主方向的對齊方式
          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.
    );
  }
}

具體代碼的含義在註釋中已經說明，至於更詳細的內容後面文章再說，這裏只大概感受一下flutter代碼，通過上面的代碼中的註釋基本上可以理解flutter開發的一個基本流程：

1. 導入依賴的包
2. 提供一個app入口方法實現 void main() => runApp(MyApp());
3. 根據需要使用 StatelessWidget 或者 StatefulWidget ，覆寫內部的 build()/createState() 方法，方法中使用各種widget構建的app

下面來看 pubspec.yaml 文件，同樣的是代碼不多，註釋很多，已經精簡成中文，理解該文件的大概作用沒問題。

需要注意的是在該文件編寫時一定要注意縮進和空格！

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

# 版本號 x.y.z+m 其中 m 是構建版本，可以使用 --build-name/--build-number 構建參數覆蓋，在 android 中 build-name 當作 versionName使用，build-number 當作versionCode使用
version: 1.0.0+1

# flutter 環境配置
environment:
  sdk: ">=2.1.0 <3.0.0"

# 庫依賴管理
dependencies:
  flutter:
    sdk: flutter

  # 一些第三方庫，後續自己選擇的庫直接在下面添加即可
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter


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

  # 使用android 平臺的 material design 風格
  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

除了上述兩個文件外，比較重要的就是平臺相關的代碼了，比如android平臺對應的android目錄中的文件，其實就是一個正常的as module，如果需要修改app的圖標什麼的或者需要和android原生平臺通信，可以進入該目錄修改添加相關代碼，也可以在 android 目錄上右鍵，點擊 Flutter— open android module in android studio> 選項，啓動一個心得as窗口，當成普通android module 編寫代碼，這就屬於原生開發的範疇了，這裏不再贅述。

總結

通過上面的步驟和介紹，到這裏應該可以從感官層面理解flutter開發的一個基本流程，具體的內容後續文章會逐一講解。

另外和文章開頭提到的優惠券app鯨魚精選 對應的還有一個微信小程序，可以掃下方二維碼體驗下，算是本人的一種支持吧，這裏先行謝過~