Flutter Gallery 開發案例01——項目初始化

概述

       當今的科技圈，發展突飛猛進，新技術層出不窮，前端開發涌現出了 NodeJS, ReactJS, React Native 等等的全新技術。谷歌做爲全球技術的領導者之一，也在不斷的推出各類各樣的新技術。Flutter 就是谷歌在2017年年末才正式公開的一項全新的開發技術平臺。對於這門技術具體的介紹和功能，請參考 https://flutter.io 或者國內志願者進行翻譯的中文網站 http://doc.flutter-dev.cn/。簡而言之，Flutter 的出現是爲了加速移動端應用的開發效率，而運用的方式則是，Flutter 選擇 Dart 做爲開發語言，在編譯階段，直接將代碼編譯爲 Android 平臺的本地代碼以及 IOS 平臺的原生代碼。這樣一來，開發者只須要維護一套代碼，就能夠獲得 Android 和 IOS 平臺的2個具備原生應用體驗的 APP，大幅度的爲移動應用開發加速。

       宏觀的就說這麼多，感興趣的同窗自行去了解，個人目的仍是對想要了解 Flutter 開發流程的同窗介紹在 Flutter 中一些最基本的控件和調試的方法。另外，對於想要詢問 Flutter 目前是否適合用來作企業或者產品的移動應用開發的。我我的的答案是，目前不適合，Flutter 目前公開的版本仍然仍是 beta 測試版本，距離 SDK 穩定還有很長的路要走。所以，目前的 Flutter 技術，我我的的見解是能夠做爲一個程序員額外的興趣，若是你對這門新技術有興趣，那麼就和筆者一塊兒來探索吧。若是你想快速的選擇一門合適的語言用在生產環境，那麼可能筆者的這個系列並不很適合。

       閒言少敘，書歸正傳。之因此選擇 Flutter Gallery 這個項目做爲開端，是筆者認爲，這個項目的用戶體驗很不錯，在代碼層面，也包含了基本經常使用的各類控件以及 Flutter 開發的獨特風格。

獲取源代碼

       這個系列的源代碼筆者都託管在 https://gitee.com/foxchan/flutter_gallery上，具體的項目初始化請參考 gitee 主頁。整個系列的代碼筆者將使用一種分步驟分模塊的方式進行安排，便於瀏覽的同窗按照本身的學習進度按部就班的閱讀代碼，更容易瞭解項目開發的全過程。一切就緒以後，打開終端，運行：

git clone https://gitee.com/foxchan/flutter_gallery.git

將項目克隆到本地。固然，對於咱們這個系列，筆者仍是更鼓勵你們跟隨筆者一塊兒，從0開始手敲代碼，筆者提供的代碼僅僅做爲各位的參考。下面，就開始本篇文章的學習內容，在這片文章中，我將帶着你們新建一個 Flutter 項目，而且在模擬器上把新建的這個項目運行起來。

建立項目

       筆者所使用的IDE爲VSCode，固然，你能夠選擇任何一款你用的順手的IDE進行編程，這都不影響。具體的各類IDE的配置，請參考 https://flutter.io/get-started/editor/#androidstudio 或者 http://doc.flutter-dev.cn/get-started/editor/ 。

安裝插件

Flutter 已經爲 VSCode 開發了便於開發的插件，這裏筆者簡單的提一下，咱們要安裝 dart code 插件，

固然，爲了更好的開發體驗，筆者也安裝了 Flutter Snippets 這個插件。

新建項目

接下來，咱們就能夠在 VSCode 中，使用 Flutter 爲咱們提供的插件，建立我們的第一個項目了。打開 VSCode 的命令執行面板，輸入'flutter'，

選擇'Flutter: New Project'，接下來會提示輸入項目的名稱，這裏，咱們第一個子項目的目的很簡單，就是環境的搭建，所以咱們輸入'sec01_setup'，回車之後，VSCode 會爲咱們把基本的項目結構生成。至此，咱們目前的文件結構以下圖：

接下來的工做，咱們須要在 /sec01_setup 目錄中來完成，在 VSCode 中，打開 /sec01_setup，目前咱們的項目結構以下，

接下來，咱們簡單的來了解一下這個最簡單的 Flutter 項目的構造，首先咱們要關注到的是 pubspec.yaml 這個文件。這個文件就是 Flutter 項目的配置文件，他的做用就是爲項目提供各類資源和項目的信息。

name: sec01_setup
description: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

刪除以 '#' 開頭的註釋文件之後，咱們獲得了上面這個最精簡的配置文件，基本上都一目瞭然，其中有項目名稱，項目的描述信息以及項目中的依賴。

按F5運行項目以後，咱們就能看到這第一個最簡單的項目的狀況了，以下圖所示：

能夠看到，這個項目運行以後，是一個很簡單的統計按鈕點擊次數的應用，點擊右下角的加號按鈕，屏幕中央的數字就加1。接下來咱們就先來分析一下這個項目的構成，瞭解一下 Flutter 應用的基本結構。

       Flutter 應用的應用入口仍是衆所周知的 main 函數，以下：

void main() => runApp(new MyApp());

這個就是整個應用程序的入口，runApp 中有一個參數，類型爲 Widget，這個能夠理解爲應用的入口控件。另外，有一點須要注意的是，不像 Android 或者 IOS 框架，在 Flutter 中，幾乎全部的結構都是 Widget，也就是組件，所以，在 main 程序中就直接加載了 MyApp 這個 Widget。

       繼續分析，看到 MyApp 這個類，繼承自 StatelessWidget，顧名思義，這是一個無狀態的控件。如何理解無狀態？也就是說，MyApp 這個控件的做用只有一個，那就是根據目前具備的參數，繪製相應的控件，不對用戶輸入或者網絡等進行處理。對於一個 Widget 來講，最重要的方法就是 build，看下面的代碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

build 方法會在控件重繪的時候被調用。這段代碼就是 MyApp 中的繪製部分，能夠看到，這裏返回了 MaterialApp 控件，這裏須要注意，在 Flutter 應用中，runApp 中調用的控件必須基於 MaterialApp，不然會報錯。這裏，咱們着重關注的參數是 home 這個參數，這表明應用程序啓動之後，MyHomePage 這個控件將會被最早調用。

       接下來咱們就來看看 MyHomePage 又是一個什麼樣的控件。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

如上，這個控件繼承自 StatefulWidget 這個父類，顧名思義，這就是一個有狀態的控件。按照上文的理解，在這個控件中，咱們將處理來自系統，用戶或者網絡的各項事件。在 Flutter 開發中，咱們須要在 StatefulWidget 的子類中重寫 createState() 方法，返回咱們自定義的處理事件的 State 對象，咱們立刻就會講到。

      能夠看到，咱們在 createState() 方法中返回了一個 State 控件，_MyHomePageState。在開始看代碼以前，咱們提一個 Dart 中的小細節，注意 _MyHomePageState 這個類的類名如下劃線開始，這表明了 _MyHomePageState 這個類爲私有類，至關於 Java 中的 private class MyHomePageState。下面咱們來剖析一下這個類的具體實現：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

在 State 的實現類中，最爲關鍵的方法就是 setState() 調用這個方法以後，控件的狀態就會被標記爲已改變，涉及到的 Widget 就會被要求進行重繪，Widget 的 build 方法就會被調用。咱們來看這個 State 控件中的 build 方法，首先，build 方法返回了一個根控件 Scaffold，這個控件是一個 Flutter 中做爲 Material Design 風格的一個基礎控件，調用這個控件以後，會生成一個 Material Design 的基本框架，在上圖的手機截圖中也能看出來。繼續看，在 Scaffold 控件的 body 參數中，就是項目的主體部分了。項目的主體部分結構以下：Center -> Column -> [Text, Text]。在 Flutter 的控件佈局中，官方提倡的是組合的方式，所以通常狀況下，一個控件就表明一種佈局效果。這種風格在以後的教程中還會常常看到，這裏先提一句。咱們來分析一波，在 AppBar 下面，首先放置了一個 Center 控件，這個控件會將其中的子控件進行居中處理。其中嵌套了一個 Column 控件，這個控件是一個列式佈局的控件，即全部的控件在垂直方向上依次分佈，每一個控件一行。

       接着，咱們來關注一下 Column 控件中的第二個 Text 控件，這個控件就是顯示按鈕點擊次數的控件，根據用戶點擊次數的變化，顯示對應的數字。能夠看到，在這個控件中，設置了顯示內容爲 _counter 變量中的值。

       最後，在 FloatingActionButton 中，綁定了按鈕的點擊事件。至此，整個基本項目的流程和 Flutter 程序的基本運行流程就梳理通暢了。