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

原做者： 有女票的程序狗
連接： https://www.jianshu.com/p/e8d...

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

廢話少說，先當作果

0  Day0 環境搭建

環境搭建很簡單，就是下個 Flutter SDK，而後設置設置環境變量什麼的就差很少了，我這裏是按照 Flutter 中文網教程搭建，沒遇到問題。

附上地址：

https://flutterchina.club/get...

1 Day1 dart語法學習 + Flutter基本開發瞭解

dart 基本語法學習，看這裏便可

 https://book.flutterchina.clu...

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

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

• Widget 概念
• 路由管理
• 包引用
• Widget 狀態更新
• 網絡請求 + 數據解析
• 異步操做

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

• 「阿里爲你們學習Flutter操碎了心」

項目地址：

https://github.com/alibaba/fl...

能夠仔細作一下 Flutter 中文網的這個教程

https://flutterchina.club/get... 

初步瞭解Flutter，作完這個教程，基本就能夠上手開發咱們的簡版『玩Android』客戶端了。

2 Day2 基本框架搭建

最外層用 Scaffold 包裹，Scaffold 直接支持底部導航欄這種佈局，咱們只要實現 body 和 bottomNavigationBar 就能夠。

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

Scaffold(
    body: PageView(
      controller: _pageCtr,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        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， 這樣就能簡單實現一個底部導航欄切換頁面的功能。

3 Day3 列表建立+網絡數據獲取

文章和項目模塊，用的都是頂部導航欄+列表的形式展現信息

• 頂部導航欄選擇flutter自帶的 TabBar
• 列表仍是選擇flutter自帶的 ListView

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

須要注意的是，因爲切換到這個模塊就須要網絡請求，而且有數據後纔開始繪製界面，因此咱們這裏在構建Widget的時候須要 FutureBuilder，FutureBuilder使用方法能夠在文末的項目中找到。

主要就是能夠拿到數據回調的狀態，而後根據這個狀態再構建相應的widght。

網絡操做我選擇的是 Dio 2.0，因爲剛出來不久，而且和1.0仍是有些不一樣，網上大部分文章都是基於1.0的，因此建議直接看官方文檔學習，地址： 

https://github.com/flutterchi...

個人項目中用單例封裝了一下網絡請求操做，每一個api請求封裝成一個方法，使用起來也很方便，具體在文末項目中能夠找到。大概就是長這個樣子：

我先調試的是網絡請求，獲取到正確的數據後，測試 TabBar，頂部導航欄沒有問題，再建立ListView頁，條目的話就用隨便展現一個標題什麼的就能夠。

4 Day4 跳WebView + 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/chinahaoza...