摘要：繼上一篇關(guān)于的介紹，是仿照微信界面，因?yàn)樽鳛榍岸碎_發(fā)，有一定的基礎(chǔ)，所有寫起來，也不是很吃力。班門弄斧之作，若有大神見到，敬請(qǐng)指教，有不對(duì)不合理之處，敬請(qǐng)指出我是邇伶貳環(huán)境準(zhǔn)備以系統(tǒng)為例。

flutter 的入門demo 已經(jīng)寫好一個(gè)星期了，只不過一直都沒有整理出博客來。收拾好心情，來整理一下。
繼上一篇關(guān)于react-native-wx的介紹，是仿照微信界面ui，
因?yàn)樽鳛榍岸碎_發(fā)，有一定的js 基礎(chǔ)，所有寫起RN來，也不是很吃力。但是這個(gè)flutter 用的是一個(gè)新的語言 dart作為開發(fā)語言，沒有學(xué)習(xí)這個(gè)語言，但是不要怕，有開發(fā)文檔，一切都沒有那么難。這個(gè)flutter demo，雖然已經(jīng)寫了一個(gè)初步的demo，但是你要是問我，這個(gè)dart里面的具體的東西，我直言說，‘不會(huì)’（因?yàn)闆]有具體去學(xué)習(xí)這個(gè)語言，回過頭來說，若深入flutter，必學(xué)dart），我一路就是對(duì)著開發(fā)文檔和其他參考資料一路"CV"過來。不禁想起了這個(gè)圖片~

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

文章內(nèi)，圖片很多，占據(jù)了一定的篇幅。班門弄斧之作，若有大神見到，敬請(qǐng)指教，有不對(duì)不合理之處，敬請(qǐng)指出！我是邇伶貳！

以mac 系統(tǒng)為例。

安裝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 環(huán)境
flutter doctor

上圖看出，flutter 需要的環(huán)境有的具有，有的不具有，不同的操作系統(tǒng)需要配備不同的軟件環(huán)境，我們這里是mac,用的是Xcode，因此，我們不需要安裝Android Studio，忽略第一條，按照第二條提示的安裝環(huán)境；

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

安裝vscode 插件flutter

打開vscode, command+shift+p;

初始化之后，如下

debugger 模式下，跑起來：

新建文件夾 page, utils, page 下新建多個(gè)文件，一個(gè)文件表示一個(gè)頁(yè)面，utils 為工具函數(shù)， main.dart 為項(xiàng)目的主入口。

-- 組件封裝

網(wǎng)絡(luò)請(qǐng)求封裝:

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

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

/*
 * 封裝 restful 請(qǐng)求
 * 
 * GET、POST、DELETE、PATCH
 * 主要作用為統(tǒng)一處理相關(guān)事務(wù)：
 *  - 統(tǒng)一處理請(qǐng)求前綴；
 *  - 統(tǒng)一打印請(qǐng)求信息；
 *  - 統(tǒng)一打印響應(yīng)信息；
 *  - 統(tǒng)一打印報(bào)錯(cuò)信息；
 */
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

調(diào)用：
請(qǐng)求類型封裝

具體位置使用：

具體使用，不贅述，請(qǐng)查看相關(guān)代碼；
這里的接口調(diào)用依舊是nodejs 提供的接口， nodejsApi

目標(biāo)轉(zhuǎn)移到main.dart,這里是一個(gè)項(xiàng)目的主入口文件，為了不增加項(xiàng)目的復(fù)雜度，這里也將路由控制的相關(guān)代碼寫入。分步驟解釋如下：
導(dǎo)包：

注冊(cè)路由表：

底部導(dǎo)航顯示：

頭部icon: Icon(Icons.add_circle_outline), 這里icon flutter 自帶了不少的圖標(biāo)，可以自行選擇使用，地址：https://api.flutter.dev/flutt...

定義一個(gè)動(dòng)畫類

使用：

安裝依賴

pubspec.yaml

在這個(gè)文件里面，只要寫入相關(guān)的package，編輯器vscode 會(huì)自動(dòng)下載。pub.dev, 這個(gè)dart語言的包整理平臺(tái)，相當(dāng)于 我們熟知的 npm 網(wǎng)站，需要什么package，自己去找相關(guān)的api。
相機(jī)的調(diào)用，比較簡(jiǎn)單，flutter 提供了這個(gè)方法，我們只要按照api提示操作即可實(shí)現(xiàn)。
使用如下：

效果如下：

代碼：

效果：

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

使用websocket，搭建聊天系統(tǒng)；

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

上拉下拉的手勢(shì)動(dòng)作；

。。。

入門介紹
flutter中文網(wǎng)
圖標(biāo)檢索
導(dǎo)航示例
dart package
視頻課程講解

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