兩個半月的業餘時間用Flutter作了個app-技術篇

技術背景: 作了幾年前端,會用node 寫這篇文章是本身對這段時間作個技術總結,記錄一些開發過程當中比較難以解決的問題和經驗,同時但願對Flutter感興趣但還在觀望的同窗加入Flutter開發,簡單易上手

學習資料 Flutter 實戰, 入門能夠看這本電子書,不少flutter知識都是從這裏學習到的,在此感謝下做者

一些小結

1. 路由跳轉

1. 註冊路由 main.dart

MaterialApp(
  routes:{
    'my_page': (context) => MyPage(),
    ...
  }
)
複製代碼

2. 點擊跳轉 xxx.dart

FlatButton(
    onPressed: () {
      // 可經過arguments傳遞參數
      Navigator.pushNamed(context, 'my_page', arguments: {'data': data});
    }
  )
複製代碼

2. 循環widget

Row(children: strings.map((item) => Text(item)).toList());

3. 寬高設置

前端開發中html標籤是能夠自行設定寬高,顏色,但在flutter中只有幾個widget能夠(剛開始接觸有點不習慣)

// 可設置寬高及顏色
Container(
  // 滿屏
  width: MediaQuery.of(context).size.width,
  height: 200,
  color: Colors.blue
)
// 可設置寬高
SizedBox(
  width: 200,
  height: 200
)
複製代碼

• 若是要給按鈕設置大小,即可經過在外包裹個Container來控制大小:

Container(
  width: 80,
  height: 30,
  child: FlatButton()
)
複製代碼

• 也可使用ButtonTheme來修改按鈕大小:

ButtonTheme(
  minWidth: 65.0,
  height: 24.0,
  child: OutlineButton()
)
複製代碼

• 圖片可自行設置寬高

4. 區分環境

把啓動文件按環境分爲main_local,main_dev.dart,main.dart,根據須要啓動不一樣文件,詳見 Flutter 實現根據環境加載不一樣配置

• android studio設置運行環境, 設置後能夠很快切換環境

• vscode 設置launch.json文件的"program": "lib/main.dart"爲不一樣的啓動文件便可

不過帶來的問題是涉及main.dart的修改都須要改三份文件

5. flutter封裝的組件

flutter封裝了一些組件,可讓開發者專一於業務,如TabBar, DatePicker等

6. dio增長配置信息

token,版本號,ip等信息須要由app傳到服務端,不能每次請求都獲取一遍這些信息,能夠統一設置一次 dao_basis.dart

Dio dio = Dio()..interceptors.add(InterceptorsWrapper(
  // 請求時的處理
  onRequest: (RequestOptions options) async {
    String _platform = 'android';
    String _version = packageInfo.version;
    options.headers..addAll({
      'platform': _platform,
      'version': _version,
    })
  }
  // 相應時的處理
  onResponse: (Response options) async {
    // 對響應狀態碼如401的處理
    if (options.data['code'] == 401) {
      ...
    }
  }
  // 發生錯誤時的處理
  onError: (DioError err) {
    ...
  }
))
複製代碼

user_dao.dart

// 其餘請求引用上個文件便可
import 'dao_basis.dart';
Response res = await dio.get('xxx);
複製代碼

7. ios證書設置指南

極光推送文檔, 比騰訊信鴿的詳細且新

奇怪的問題

1. 鏈接真機失敗 Error connecting to the service protocol: HttpException 剛開始切換wifi還好使,後來漸漸這招失敗次數也多了;意外發現從新鏈接下手機就能夠了,不過最近發現這招也有不行的時候了,雖然失敗次數少。

2. Check failed: vm. Must be able to initialize the VM 忘了改了什麼,用vscode運行和xcode運行都不行,用android studio試了下竟然能夠了,也是很奇怪

3. 安卓真機運行不了 先運行安卓模擬器,再運行真機

4. MissingPluginException(No implementation found for method startWork on channel xxx) 新安裝的包,有時須要到ios目錄pod install

使用的第三方包

羅列下用到的第三方包(經常使用的如dio,flutter_swiper等就不列了),省的你們再去尋找啦

彈窗

fluttertoast 使用很方便,不須要傳context,引入後隨意調用; 不過貌似取消不了,詳見issue Fluttertoast.cancel() not work

loading

進行網絡請求等操做時的loading狀態 modal_progress_hud

網絡圖片處理

緩存網絡圖片,且帶有loading的placeholder cached_network_image

下拉刷新

下拉刷新及上拉加載 flutter_easyrefresh

app名爲小魚乾,主要功能是提供上門喂貓服務,歡迎下載使用

兩個半月的業餘時間用Flutter作了個app-項目篇暨年終總結 | 掘金年度徵文