Flutter - IOT領域應用場景實戰

自谷歌開發者大會以後,一直手癢想體驗一下Flutter，發現並不是JS那種須要bridge的反覆造輪子的框架，在2016年嘗試使用React-Native開發App發現真的是很難用，莫名紅屏報錯填坑無數，這兩年也一直尋找可否跨越Bridge的混合框架，Flutter出現了~

爲何是IOT - 由於最近一直在作相似項目包括文章Demo部分

文章中心思想 - 代表填坑過程 & 怎樣快速上手

目標

• 實現高產出
  
• 一套代碼搭建高性能iOS&Android客戶端
• 儘可能減小對native的依賴

DEMO

入門

官網是必定要看的，認真敲幾個例子百十來行代碼應該就會明白Flutter框架大概是怎麼run起來的，剩下的就一步一步填坑，這框架有引力，害得我上廁所都在想這個佈局怎麼實現...

寫在前 - 不要在意學習成本...

Dart語言

若是熟悉Java或者JS的話，會從Dart身上看到這些語言的影子，在這以前我都不知道Dart是幹什麼的.

看文章不如直接上手，建立變量？var一下確定沒問題，但先要知道對象叫什麼,我是基本上一路猜一路寫...

Flutter

一切皆Widget能夠理解成UI組件都是Widget對象，整合Material和Cupertion Design設計風格的控件，好比Button，我就以爲RaisedButton好看，iOS無需封裝直接拿來用，兩平臺保持高度一致性，相似的控件還有不少，Demo中會列舉出經常使用的

用RN也能夠?還記得AlertIOS和xxxIOS麼還指定平臺簡直垃圾到爆炸,RN粉絲別噴我...

SDK看什麼？如下幾點須要留意

- 控件叫什麼名字？

TableView - > ListView

CollectionView ->GridView

Label -> Text

TextField -> TextField

Button -> RaisedButton|| MaterialButton||FlatButton||CupertinoButton 隨你用

若是想用iOS控件好比switch，直接設計風格+控件名,如：CupertinoSwitch

- 控件怎麼建立？

只須要關注Text實現就好，外部是佈局

Container(
  margin: EdgeInsets.only(top: 20),
  alignment: AlignmentDirectional.center,
  child: Text(
    'Shanghai',
    style: TextStyle(
        fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold),
  ),
),複製代碼

- 我怎麼擺放到屏幕指定位置上？

和Android或者Web類似，一句話切豆腐

這兩個佈局說明怎樣循環生成子控件 + 佈局解釋，基本上列表都沿用於此

看到presenter？ 沒錯是MVP設計模式

Container topView() {
  return Container(
      height: screenHeight * 0.33,
      color: Colors.blue,
      child: ListView(
        physics: new NeverScrollableScrollPhysics(),//Ban Scroll Gesture
        controller: scrollController, //Listener
        scrollDirection: Axis.horizontal,
        children: devicesList(),
      ));
}

List<Widget> devicesList() {
  _presenter.getDeviceList();
  List<Widget> cell = new List();
  for (var i = 0; i < _presenter.deviceList.length; ++i) {
    DeviceData device = _presenter.deviceList[i];
    cell.add(deviceCell(i, device));
  }
  return cell;
}複製代碼

- 個人Controller/Activity在哪

StatefulWidget  有狀態 - 經常使用能夠管理子控件刷新
StatelessWidget 無狀態 - 不須要管理子控件狀態刷新複製代碼

直接上代碼，AndroidStudio有語法糖，直接stful便可快速生成，無狀態stless

class MineController extends StatefulWidget {
  @override
  _MineControllerState createState() => _MineControllerState();
}

class _MineControllerState extends State<MineController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(  //整個頁面承載對象
      appBar: AppBar( //導航樣式
        backgroundColor: Colors.white,
        elevation: 0.0,//陰影
        title: Text('Mine'),  //標題
      ),
      body: ListView(children: cellView()), //主視圖
    );
  }複製代碼

既想要無狀態又想要有狀態怎麼辦？

home指向有狀態Widget便可，下面是比較完整的頁面代碼

class HomeController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primaryColor: Colors.white), home: HomeCtrl());
  }
}

class HomeCtrl extends StatefulWidget {
  @override
  _HomeCtrlState createState() => _HomeCtrlState();
}
class _HomeCtrlState extends State<HomeCtrl> {
  HomePresenter presenter = new HomePresenter();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      drawer: Drawer(), //抽屜，直接建立就有
      appBar: AppBar(
        title: Text('Home'),
        backgroundColor: Colors.white,
        elevation: 1.0,
        actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: () {})],
      ),
      body: Stack(    //Stack佈局主要是能夠在圖片上面承載子控件
        children: <Widget>[
          Image.asset(
            'static/home.jpeg',
            fit: BoxFit.fill,
          ),
          ListView.builder(
            padding: EdgeInsets.only(left: 20, right: 20),
            itemCount: 10,
            itemBuilder: itemView,
          ),
        ],
      ),
    );
  }複製代碼

Layout

沒有xib、storyboard或xml, 對於我碼代碼的習慣來講，並不喜歡拖拖拽拽，coding能解決的問題幹嗎搞這麼複雜，況且你拖完就結束了？不會的...

經常使用佈局

Container   只能放一個子控件(放row/column沒問題啊 畢竟是一個對象)

Row           行 能夠放多個子控件

Column       列 能夠放多個子控件

Stack         可重疊，舉例：在背景圖片上面放控件

很複雜的佈局也離不開以上幾個Layout，基本上貫穿了整個項目

須要注意的是，認真研究這四個控件的屬性，基本上知足大部分應用場景

DEMO架構

細節不上了,總體就是這樣,有點偏向iOS

Http推薦使用 dio 

Websocket: 參考官網

設計參考

• IOT終端設備不能只當作工具來使用,更偏向一臺互聯網設備
• 推薦使用使用字體類圖標,Flutter整合兩個平臺的文字圖標,基本能夠覆蓋大部分開發需求
• 統一的Widget可極大減小iOS&Android平臺差別性

FAQ

這裏提供一些經常使用設計控件速查

- 左側抽屜叫什麼?

Scaffold裏的屬性Scaffold理解一張頁面包括了appBar(導航)和body(主頁面)

return new Scaffold(
  drawer: Drawer(),
);複製代碼

- 如何實現ListView iOS滑動刪除子控件效果?(我幫大家谷歌完了)

在佈局cell最外層添加,showSnackBar自帶的toastView iOS看着效果很不錯,關鍵Android還用得上~

child: Dismissible(
    key: Key('1'),
    background: Container(
      color: Colors.red,
    ),
    onDismissed: (d) {
      Scaffold.of(context).showSnackBar(new SnackBar(
        content: new Text("Remove Success"),
      ));
    },)複製代碼

- 底部tabbar

Scaffold屬性,記得body:要實現bar裏面全部controller

bottomNavigationBar複製代碼

- 修改返回按鈕樣式返回無效?

是的,也要手動實現返回 Navigator.of(context).pop();

- 輪播圖

本身能夠實現,ListView橫向以後,添加監聽 scrollController,否則你看不到offset,本身實現一個輪播圖的封裝單獨不大,往後寫一個組件share一下

寫在後:

快速學習和實現怎麼具體操做

推薦按照官網demo敲一邊,能理解一下這東西怎麼來的.

文中Demo未實現的部分還有不少,主要是糾結細節部分怎麼實現,更多的頁面也就是重複Coding的過程,之後有時間爭取補完.