flutter的入門實踐到可開發

flutter的入門記錄

0.前言：

flutter 的入門demo 已經寫好一個星期了，只不過一直都沒有整理出博客來。收拾好心情，來整理一下。
繼上一篇關於react-native-wx的介紹，是仿照微信界面ui，
由於做爲前端開發，有必定的js 基礎，全部寫起RN來，也不是很吃力。可是這個flutter 用的是一個新的語言 dart做爲開發語言，沒有學習這個語言，可是不要怕，有開發文檔，一切都沒有那麼難。這個flutter demo，雖然已經寫了一個初步的demo，可是你要是問我，這個dart裏面的具體的東西，我直言說，‘不會’（由於沒有具體去學習這個語言，回過頭來講，若深刻flutter，必學dart），我一路就是對着開發文檔和其餘參考資料一路"CV"過來。不由想起了這個圖片~

話很少說，也將繼續參考微信界面ui開發，項目名稱爲 flutter-wx,爲了避免增長這個入門體驗demo的複雜度，只作了幾個基本功能頁面。項目地址： flutter-wx,歡迎查看！下面截圖以下：

文章內，圖片不少，佔據了必定的篇幅。班門弄斧之做，如有大神見到，敬請指教，有不對不合理之處，敬請指出！我是邇伶貳！

1. 環境準備

以mac 系統爲例。

• 安裝xcode,這裏主要使用的是xcode裏面的ios模擬器，筆者不太喜歡用xcode,如何安裝，這裏不作贅述；
• 使用flutter鏡像
  編輯 .bash_profile， 日後追加如下，
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
• 獲取Flutter SDK
• https://flutter.dev/docs/deve...
• 解壓SDK 壓縮包，將路徑寫入 .bash_profile
• source ~/.bash_profile
• 檢查 flutter 環境
  flutter doctor

上圖看出，flutter 須要的環境有的具備，有的不具備，不一樣的操做系統須要配備不一樣的軟件環境，咱們這裏是mac,用的是Xcode，所以，咱們不須要安裝Android Studio，忽略第一條，按照第二條提示的安裝環境；

2. 軟件安裝

• 安裝編輯器vscode，這裏使用vscode,
• 安裝vscode 插件flutter
  

3. 初始化項目

打開vscode, command+shift+p;

初始化以後，以下

debugger 模式下，跑起來：

4. 修改項目

新建文件夾 page, utils, page 下新建多個文件，一個文件表示一個頁面，utils 爲工具函數， main.dart 爲項目的主入口。

5. 添磚加瓦

-- 組件封裝

網絡請求封裝:

在utils 文件夾新建文件 HttpRequest.dart， 代碼寫入：

import 'package:dio/dio.dart';
import 'dart:async';

/*
 * 封裝 restful 請求
 * 
 * GET、POST、DELETE、PATCH
 * 主要做用爲統一處理相關事務：
 *  - 統一處理請求前綴；
 *  - 統一打印請求信息；
 *  - 統一打印響應信息；
 *  - 統一打印報錯信息；
 */
class HttpUtils {

  /// global dio object
  static Dio dio;

  /// default options
  static const String API_PREFIX = 'http://18.10.1.115:4000';
  // static const String API_PREFIX = 'http://api.wtodd.wang:4000';
  static const int CONNECT_TIMEOUT = 10000;
  static const int RECEIVE_TIMEOUT = 3000;

  /// http request methods
  static const String GET = 'get';
  static const String POST = 'post';
  static const String PUT = 'put';
  static const String PATCH = 'patch';
  static const String DELETE = 'delete';

  /// request method
  static Future<Map> request (
    String url, 
    { data, method }) async {

    data = data ?? {};
    method = method ?? 'GET';

    /// restful 請求處理   
    data.forEach((key, value) {
      if (url.indexOf(key) != -1) {
        url = url.replaceAll(':$key', value.toString());
      }
    });

    /// 打印請求相關信息：請求地址、請求方式、請求參數
    print('請求地址：【' + method + '  ' + url + '】');
    print('請求參數：' + data.toString());

    Dio dio = createInstance();
    var result;

    try {
      Response response = await dio.request(url, data: data, options: new Options(method: method));

      result = response.data;

      /// 打印響應相關信息
      print('響應數據：' + response.toString());
    } on DioError catch (e) {
      /// 打印請求失敗相關信息
      print('請求出錯：' + e.toString());
    } 

    return result;
  }

  /// 建立 dio 實例對象
  static Dio createInstance () {
    if (dio == null) {
      /// 全局屬性：請求前綴、鏈接超時時間、響應超時時間
      BaseOptions options = new BaseOptions(
          baseUrl: API_PREFIX,
          connectTimeout: CONNECT_TIMEOUT,
          receiveTimeout: RECEIVE_TIMEOUT,
      );

      dio = new Dio(options);
    }

    return dio;
  }

  /// 清空 dio 對象
  static clear () {
    dio = null;
  }

}

調用：
請求類型封裝

具體位置使用：

具體使用，不贅述，請查看相關代碼；
這裏的接口調用依舊是nodejs 提供的接口， nodejsApi

頁面路由控制

目標轉移到main.dart,這裏是一個項目的主入口文件，爲了避免增長項目的複雜度，這裏也將路由控制的相關代碼寫入。分步驟解釋以下：
導包：

註冊路由表：

底部導航顯示：

頭部及按鈕

頭部icon: Icon(Icons.add_circle_outline), 這裏icon flutter 自帶了很多的圖標，能夠自行選擇使用，地址：https://api.flutter.dev/flutt...

動畫的實現

定義一個動畫類

使用：

調用機器 照相機

安裝依賴

pubspec.yaml

在這個文件裏面，只要寫入相關的package，編輯器vscode 會自動下載。pub.dev, 這個dart語言的包整理平臺，至關於 咱們熟知的 npm 網站，須要什麼package，本身去找相關的api。
相機的調用，比較簡單，flutter 提供了這個方法，咱們只要按照api提示操做便可實現。
使用以下：

效果以下：

使用webview

安裝依賴，如上

代碼：

效果：

6.心得

強弱類型語言：咱們常寫js這種弱類型語言，一上來看這個強類型的dart,未免會有點懵逼，我的認爲，學習語言應該先把強類型語言打好基礎，如C java，會一個js,之後看別的語言會有侷限性；
flutter的語法嵌套： 雖說方法裏面嵌套方法，寫起來感受好難受，項目複雜了，編輯器橫向的還會出現滾動條，vscode 針對這點也作了友好性的提示，防止多層括號讓人眼迷，估計是在vscode 的flutter 插件中植入的；可是，也是由於這樣多級自由的嵌套，提供了一個很靈活的方案，一個佈局多種方案，能夠用不一樣的widget實現，同時，這就要多學習幾個widget，省的像咱們web 「一個div打天下」的單一解決方案。

7. TODO

• 使用websocket，搭建聊天系統；
• 通信錄頁面，分組歸類，這個主要得是後端接口來完成；
• 上拉下拉的手勢動做；
• 。。。

9. 參考文章

入門介紹
flutter中文網
圖標檢索
導航示例
dart package
視頻課程講解

flutter 新手，班門弄斧之demo，如有大神見到，敬請指教，有不對不合理之處，敬請指出！我是邇伶貳！