零Flutter基礎，四天搞定Flutter玩Android客戶端攻略

作者：有女票的程式狗

連結：https://www.jianshu.com/p/e8d49e7a0554

身為android開發者，在這幾天深深感到flutter容易上手的特性，尤其是dart，稍微瞭解下基本語法，就能直接寫，爽的一批~

廢話少說，先看成果

Day0 環境搭建

環境搭建很簡單，就是下個 Flutter SDK，然後設定設定環境變數什麼的就差不多了，我這裡是按照 Flutter 中文網教程搭建，沒遇到問題。

附上地址：

https://flutterchina.club/get-started/install/

dart 基本語法學習，看這裡即可

https://book.flutterchina.club/chapter1/dart.html

有 Java 開發基礎，花半小時瞭解 dart 語言特型就能上手開發了。

Flutter 基礎開發需要瞭解的一些知識點

• Widget 概念

• 路由管理

• 包取用

• Widget 狀態更新

• 網路請求 + 資料解析

• 非同步操作

小 Tip： 阿裡某個團隊開源了一個『Flutter Go』專案，遇到不會的原生元件在上面直接搜名字即可看到使用方法，屬性說明什麼的，非常之方便！（開源萬歲）

• “阿裡為大家學習Flutter操碎了心”

專案地址：

https://github.com/alibaba/flutter-go

可以仔細做一下 Flutter 中文網的這個教程

https://flutterchina.club/get-started/codelab/ 

初步瞭解Flutter，做完這個教程，基本就可以上手開發我們的簡版『玩Android』客戶端了。

最外層用 Scaffold 包裹，Scaffold 直接支援底部導航欄這種佈局，我們只要實現 body 和 bottomNavigationBar 就可以。

頁面容器我們用 PageView 實現， 底部導航欄用 BottomNavigationBar 實現。

Scaffold(
    body: PageView(
      controller: _pageCtr,
      physics: NeverScrollableScrollPhysics(),
      children: [
        HomePage(),
        ProjectPracticePage(),
        WechatArticlePage(),
      ],
    ),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.deepPurpleAccent,
        onTap: (index) => _click(index),
        items: [
          BottomNavigationBarItem(
              title: Text('推薦'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(
              title: Text('專案'), icon: Icon(Icons.map)),
          BottomNavigationBarItem(
              title: Text('公眾號'), icon: Icon(Icons.contact_mail)),
        ]),
  )

三個介面都是有狀態的，所以都繼承 StatefulWidget， 這樣就能簡單實現一個底部導航欄切換頁面的功能。

文章和專案模組，用的都是頂部導航欄+串列的形式展示資訊

• 頂部導航欄選擇flutter自帶的 TabBar

• 串列還是選擇flutter自帶的 ListView

關於如何使用，Flutter Go 中一查便知

需要註意的是，由於切換到這個模組就需要網路請求，並且有資料後才開始繪製介面，所以我們這裡在構建Widget的時候需要 FutureBuilder，FutureBuilder使用方法可以在文末的專案中找到。

主要就是可以拿到資料回呼的狀態，然後根據這個狀態再構建相應的widght。

網路操作我選擇的是 Dio 2.0，由於剛出來不久，並且和1.0還是有些不同，網上大部分文章都是基於1.0的，所以建議直接看官方檔案學習，地址： 

https://github.com/flutterchina/dio#examples

我的專案中用單例封裝了一下網路請求操作，每個api請求封裝成一個方法，使用起來也很方便，具體在文末專案中可以找到。大概就是長這個樣子：

我先除錯的是網路請求，獲取到正確的資料後，測試 TabBar，頂部導航欄沒有問題，再建立ListView頁，條目的話就用隨便展示一個標題什麼的就可以。

為什麼我把 ListView 條目完善放到最後，因為我覺得在程式碼中寫檢視是在是太麻煩了，那麼多層，肯定是一個難啃的硬骨頭，結果上手之後發現，其實也就是看起來很麻煩，真正寫的時候，雖然不如android中XML檔案方便，但是確實有一種行雲流水的感覺QAQ。

好話說在前頭，寫起來雖然問題不大，但是真的不符合主流好嗎，寫完看的我頭大，隨便放張圖感受下：

後期維護成本也是問題，希望谷歌在這方面做一些改變，讓 Flutter 可以更好的發展下去。

在設計好一個檢視後，可以橫向縱向一層一層定義結構，行就用 Row，列就用 Colunm，使用方法就在 Flutter Go 上去查。在 Flutter 中，萬物皆為 Widght，可以在圖中看到，即使是一個邊距之類的，都會用一個 Widget 實現。

點選事件也是一個 Widght， 用 GestureDetector 實現。有兩個引數，一個是 onTap(), 也就是點選的回呼，一個是 child，也就是我們需要點選事件的 widght。

這個專案中，點選事件都是跳 WebView 頁，然後看下 WebView 頁怎麼建立。如果不需要狀態管理，那麼就可以正常建立一個介面，然後child用 WebviewScaffold 實現，即可實現 WebView 的功能。

總結

大佬都說大前端是趨勢，身為客戶端開發者，瞭解一些大前端開發技術絕對不虧，甚至真香哈哈。

貼了那麼多地址，最後也把這個專案的地址貼上來吧 ：

https://github.com/chinahaozai/enjoy_android

朋友會在“發現-看一看”看到你“在看”的內容

確定