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

簡單的快樂發表於2020-01-07
FlutterAPP

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

學習資料

Flutter 實戰, 入門可以看這本電子書,很多flutter知識都是從這裡學習到的,在此感謝下作者

一些小結

1. 路由跳轉

  1. 註冊路由 main.dart
MaterialApp(
  routes:{
    'my_page': (context) => MyPage(),
    ...
  }
)
複製程式碼
  1. 點選跳轉 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 實現根據環境載入不同配置

不同環境

  • 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-專案篇暨年終總結 | 掘金年度徵文

相關文章