摘要：繼上一篇關于的介紹，是仿照微信界面，因為作為前端開發，有一定的基礎，所有寫起來，也不是很吃力。班門弄斧之作，若有大神見到，敬請指教，有不對不合理之處，敬請指出我是邇伶貳環境準備以系統為例。

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

話不多說，也將繼續參考微信界面ui開發，項目名稱為 flutter-wx,為了不增加這個入門體驗demo的復雜度，只做了幾個基本功能頁面。項目地址： flutter-wx,歡迎查看！下面截圖如下：

文章內，圖片很多，占據了一定的篇幅。班門弄斧之作，若有大神見到，敬請指教，有不對不合理之處，敬請指出！我是邇伶貳！

以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，忽略第一條，按照第二條提示的安裝環境；

安裝編輯器vscode，這里使用vscode,

安裝vscode 插件flutter

打開vscode, command+shift+p;

初始化之后，如下

debugger 模式下，跑起來：

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

-- 組件封裝

網絡請求封裝:

    在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

調用：
請求類型封裝

具體位置使用：

具體使用，不贅述，請查看相關代碼；
這里的接口調用依舊是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提示操作即可實現。
使用如下：

效果如下：

代碼：

效果：

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

使用websocket，搭建聊天系統；

通訊錄頁面，分組歸類，這個主要得是后端接口來完成；

上拉下拉的手勢動作；

。。。

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

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