Flutter是Google開發(fā)的一套全新的跨平臺、開源UI框架(本質(zhì)上就是sdk)。 支持iOS、Android系統(tǒng)，并且是Fuchsia系統(tǒng)的默認開發(fā)套件。桌面和web上的支持也都在實驗中。
Flutter特點：跨平臺（Flutter是Fuchsia的開發(fā)框架，同時支持Android、IOS），媲美原生性能，熱重載(目前不支持熱更新，但已加入2019工作計劃)。

其官方編程語言為Dart，熟悉Dart語言。

入門網(wǎng)站：Flutter中文網(wǎng) Flutter官網(wǎng)（英文）

1、工程基礎(chǔ)簡介

1.1 Dart導(dǎo)包規(guī)則

（1）導(dǎo)包dart庫里面的包

import 'dart:html';

（2）導(dǎo)入pubspec.yaml 的dependencies依賴的包

import 'package:test/test.dart';

（3）導(dǎo)入路徑包，base為flutter根目錄

import 'package:base/components/swiper.dart';

（4）只導(dǎo)入foo

import 'package:lib1/lib1.dart' show foo;

（5）Im除了foo都導(dǎo)入

import 'package:lib2/lib2.dart' hide foo;

（6）包里面存在標識符沖突

import 'package:lib1/lib1.dart';
import 'package:lib2/lib2.dart' as lib2;

（7）延遲加載（懶加載）允許應(yīng)用程序在需要時加載庫。以下是一些您可能使用延遲加載的情況：
? ?減少應(yīng)用程序的初始啟動時間。
? ?例如，執(zhí)行A / B測試 - 試用算法的其他實現(xiàn)。
? ?加載很少使用的功能，例如可選的對話框。

import 'package:greetings/hello.dart' deferred as hello;

1.2 工程配置文件：

Flutter項目中的pubspec.yaml文件相當于Android項目中的gradle文件，項目的信息以及依賴在此文件中聲明。依賴包由pub包倉庫管理：https://pub.dartlang.org/ ，未發(fā)布在pub包倉庫的插件可以使用本地文件路徑，甚至可以直接使用git項目地址。 參考：https://flutterchina.club/using-packages/

依賴沖突：用any來解決，會找到最合適的不沖突版本，再到 pubspec.lock中找到版本號替換，最終不要直接用any，是個風(fēng)險。

#name很重要，如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改
name: flutterdemo
description: A new Flutter application.
 
dependencies:
  flutter:
    sdk: flutter
 
 #添加依賴packages 
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0
 # image_picker: ^0.4.8
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  #啟用國際化
  flutter_localizations:
    sdk: flutter
 
flutter:
 
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  # To add assets to your application, add an assets section, like this:
  #添加資源，不單單是圖片，images是個和pubspec.yaml配置文件同級的目錄，如果不同級，需要添加..
  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
   #字體設(shè)置
   fonts:
     - family: Schyler
       fonts:
       - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
      - asset: fonts/TrajanPro.ttf
      - asset: fonts/TrajanPro_Bold.ttf
        weight: 700

2、關(guān)于MaterialApp和Scaffold：

Flutter提供了兩套不同風(fēng)格的UI控件，分別是類Android風(fēng)格的MaterialApp和類IOS風(fēng)格的CupertinoApp。兩種風(fēng)格下面的widget不能完全通用，且Material風(fēng)格的widget數(shù)量要多一些。

~ MaterialApp是Flutter提供給Android的一個基礎(chǔ)widget，采用了材料設(shè)計風(fēng)格。
經(jīng)過實踐，MaterialApp全局最好只有一個，作為主界面，app的主題、主頁等全局設(shè)置可以在此定義。
最初按照官網(wǎng)教程每個page我都返回的MaterialApp，顯示是沒什么問題，因為都是widget，但是會出現(xiàn)卡頓和其他界面上的問題，大家可以自己試一下。

~ 子頁面直接返回Scaffold，Scaffold是MaterialApp的布局實現(xiàn)，提供了appbar，floatingActionButton，drawer，bottomNavigationBar等MD風(fēng)格的控件api。

Flutter默認會在debug模式下在右上角顯示水印，去除方式：

debugShowCheckedModeBanner: false

3、自定義控件。

Flutter框架給我們提供了StatelessWidget和StatefulWidget兩個抽象類，用于自定義控件。
（1）StatelessWidget是‘‘無狀態(tài)控件’’,不可變狀態(tài)控件,通過構(gòu)建其他控件來描述用戶界面的一部分。必須實現(xiàn)build方法，返回一個widget對象。 Icon、 IconButton, 和Text等都是無狀態(tài)widget, 他們都是 StatelessWidget的子類。
（2）StatefulWidget 是動態(tài)的. 用戶可以和其交互 (例如輸入一個表單、 或者移動一個slider滑塊),或者可以隨時間改變 (也許是數(shù)據(jù)改變導(dǎo)致的UI更新).Checkbox, Radio, Slider, Form, 和TextField 都是 stateful widgets, 他們都是 StatefulWidget的子類。

（3）自定義Widget：繼承StatefulWidget，并重寫createState()方法，返回一個State對象。
自定義無狀態(tài)的widget：

class RedBoard extends StatelessWidget {
  const RedBoard({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.red
    );
  }
}

自定義可變狀態(tài)的widget：

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return (new Text(wordPair.asPascalCase));
  }
}

（4）繼承自CustomPaint畫控件
Flutter也可以像Android中繼承View的方式來繪制控件，通過繼承CustomPaint類來實現(xiàn)，具體用法此處略。

4、TextField樣式

decoration: new InputDecoration(
                  hintText: 'input name to search',
                  border: InputBorder.none
              )

去掉下邊框。
外面套上Container，加上裝飾實現(xiàn)四面邊框效果

decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.green, width: 1.0),
                borderRadius: BorderRadius.circular(4)),

注意：
在decoration中加了color屬性，在Container中就不能加color屬性，否則會出錯。

TextField坑：
軟鍵盤resize窗口，解決方式：

In your `Scaffold`, set `resizeToAvoidBottomPadding` property to `false`.

preprefixIcon和suffixIcon如果使用系統(tǒng)提供的svg資源，需要指定顏色，不然在獲取焦點時會變成不可見狀態(tài)。

5、ListView

ListView的使用可以參考此文：https://blog.csdn.net/hao_m582/article/details/84112278

如果與其他widget放在同一個Column中，ListView外加Expanded才能正常顯示。

可以用ListView作為滾動塊，相當于android中的ScrollView效果，但是子view不是寫在widget中，而是直接寫在ListView的children屬性中，如：

//...
body: new ListView(
  children: [
    new Image.asset(
      'images/lake.jpg',
      width: 600.0,
      height: 240.0,
      fit: BoxFit.cover,
    ),
    titleSection,
    buttonSection,
    textSection,
  ],
),
//..

6、加載圖片與控件縮放

需要在pubspec.xml中配置圖片路徑，可以看上段代碼片段。

  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg

其中images文件夾放在工程的根目錄。加載圖片可以直接使用AssertImage類，也可以使用Image.asset方法。
經(jīng)過查找，flutter不完全支持svg，xml格式的VectorDrawable在flutter上無法直接加載
類似Android中ImageView的scaleType屬性，flutter的Image控件也有其屬性Boxfit，而且這個屬性不僅僅適用于Image相關(guān)的Widget，F(xiàn)ittedBox也具有此屬性。
FittedBox會在自己的尺寸范圍內(nèi)縮放并且調(diào)整child位置，使得child適合其尺寸。
示例代碼：

new Container(
  color: Colors.amberAccent,
  width: 300.0,
  height: 300.0,
  child: new FittedBox(
    fit: BoxFit.contain,
    alignment: Alignment.topLeft,
    child: new Container(
      color: Colors.red,
      child: new Text("FittedBox"),
    ),
  ),
)

看一下幾種縮放方式的區(qū)別：

image.png

7、Flutter構(gòu)建布局實例

Flutter布局機制的核心是Widget。在Flutter中，幾乎所有東西都是Widget - 甚至布局模型都是Widget。你在Flutter應(yīng)用中看到的圖像、圖標和文本都是widget。 甚至你看不到的東西也是widget，例如行（row）、列（column）以及用來排列、約束和對齊這些可見widget的網(wǎng)格（grid）。

查看Flutter中文網(wǎng)的教程：在Flutter中構(gòu)建布局

常用Widget：
（1）Column和Row相對于Android中的LinearLayout，Column相對于Orientation.Vertical；Row相當于Orientation.Horizontal。

（2）ListView ，GridView與Android中的同名控件效果等同

ListTitle.jpg

（3）Stack相當于Android中的FrameLayout，但是它又具有RelativeLayout的一些屬性。

（4）Card相當于Android中的CardView

（5）事件響應(yīng)：Flutter并非為所有Widget都直接提供了點擊，長按等事件響應(yīng)，這時我們需要用 GestureDetector這個widget包裹需要響應(yīng)事件的widget來實現(xiàn)功能。
GestureDetector提供了如下手勢：
??Tap
??onTapDown 指針已經(jīng)在特定位置與屏幕接觸
??onTapUp 指針停止在特定位置與屏幕接觸
??onTap tap事件觸發(fā)
??onTapCancel 先前指針觸發(fā)的onTapDown不會在觸發(fā)tap事件
??雙擊
??onDoubleTap 用戶快速連續(xù)兩次在同一位置輕敲屏幕.
??長按
??onLongPress 指針在相同位置長時間保持與屏幕接觸
??垂直拖動
??onVerticalDragStart 指針已經(jīng)與屏幕接觸并可能開始垂直移動
??onVerticalDragUpdate 指針與屏幕接觸并已沿垂直方向移動.
??onVerticalDragEnd 先前與屏幕接觸并垂直移動的指針不再與屏幕接觸，并且在停止接觸屏幕時以特定速度移動
??水平拖動
??onHorizontalDragStart 指針已經(jīng)接觸到屏幕并可能開始水平移動
??onHorizontalDragUpdate 指針與屏幕接觸并已沿水平方向移動
??onHorizontalDragEnd 先前與屏幕接觸并水平移動的指針不再與屏幕接觸，并在停止接觸屏幕時以特定速度移動。

（6）Button：Flutter提供了幾種樣式的按鈕，分別為：
??FlatButton：扁平的，沒有陰影效果的。
??RaisedButton：有陰影效果的。
??FloatingActionButton：懸浮按鈕，類似Android上同名的控件。
??OutlineButton：線框按鈕，帶外邊框的按鈕。

（7）Expanded、Flexible：Expanded 這是個用來讓子項具有伸縮能力的widget，繼承自Flexible。它們兩個的默認靈活系數(shù)是一樣的，但是fit參數(shù)不同，Expanded是默認要占滿分配的空間的，而Flexible則默認不需要。

（8）Ripple效果：Flutter中文網(wǎng)將InkWell翻譯成“墨水飛濺”效果，其實看到效果后，我們馬上就能聯(lián)想到Android中的ripple效果。

inkwell.gif

用法也是用InkWell套起想要達到效果的widget，具體屬性查看源碼注釋。

下面用一個具體的例子介紹布局和其他可能用到的Widget：

聊天.png

上圖是常見的聊天列表樣式，首先我們能想到的是整個界面是一個ListView，根據(jù)類型有左邊和右邊兩種樣式。由于flutter沒有xml布局，所有界面都是通過widget搭積木一樣，一層一層套起來的。

左側(cè)的顯示：最外層應(yīng)該是一個Row，Row中包含了一個CircleAvatar（沒錯，這個Widget官方直接提供了）和一個Text。
怎樣控制Text的背景樣式：
首先想到的就是外層套一個可以設(shè)置樣式的Container，通過給Container加一個decoration屬性，一般使用BoxDecoration，可以為Container設(shè)置背景顏色，前景顏色，邊框，圓角，圖片等能滿足大部分場景的樣式。
問題出現(xiàn)了

image.jpg

接下來我們要控制文字的最長顯示寬度，Container有一個屬性是constraints，它的類型是BoxConstraints，這個Widget可以設(shè)置最小最大寬高，不限制的話就用double.infinity(無限)。在經(jīng)過限制后，我們發(fā)現(xiàn)Flexible已經(jīng)不需要了，因為寬度已經(jīng)限制住了=.=|||。

//獲取屏幕寬度的方法
double width = MediaQuery.of(context).size.width;

接下來我們按照Android中的理解，顯示右側(cè)頭像的消息，就在Row中先加入一個Text，再加入一個CircleAvatar。沒錯，但是怎樣居右顯示呢？經(jīng)過查詢資料發(fā)現(xiàn)，Row通過textDirection屬性可以設(shè)置方向，我們將屬性設(shè)置成TextDirection.rtl，也就是rightToLeft，發(fā)現(xiàn)咦？怎么頭像跑到前面去了？那我們再把頭像代碼移到前面，竟然對了。。也就說明，Row的繪制流程都是根據(jù)children中最先加入的子widget來繪制的。

輸入框?qū)崿F(xiàn)：
輸入框首先要保持在界面底部，怎么實現(xiàn)呢？了解到官方提供了一個BottomAppBar，將其設(shè)置給Scaffold中的bottomNavigationBar屬性。BottomAppBar的child給到一個Row控件，排列語音按鈕IconButton，輸入框TextField，更多按鈕IconButton。TextField外部要嵌套一個Container修飾樣式。運行后發(fā)現(xiàn)整個界面都無法顯示，而注釋掉TextField就可以顯示，由此想到應(yīng)該是TextField的寬度不正常導(dǎo)致的，使用萬能控件Flexible套在TextField的父級Container外后顯示正常。
接下來試試輸入文字，又出現(xiàn)坑了！BottomAppBar在輸入法彈出時無法自動上移，確定了resizeToAvoidBottomPadding設(shè)置為true的情況依然無法解決問題后，只好找其他方式。在stackoverflow上找到了另一種方案：將最下面的輸入布局連同ListView都放入Scaffold的body中，ListView外加上Expanded伸縮，最外層一個Container包裹，運行完美，代碼如下：

 @override
  Widget build(BuildContext context) {
    _getConversations();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(mIsGroup
            ? mConversation.groupBean.groupName
            : mConversation.contactBean.nickName != null
                ? mConversation.contactBean.nickName
                : mConversation.contactBean.pin),
        elevation: 0.5,
        actions: <Widget>[
          new IconButton(
              icon: new Icon(
                mIsGroup ? Icons.group : Icons.person,
                size: 24,
                color: Colors.black54,
              ),
              onPressed: _goContactInfo),
        ],
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            child: _buildConversations(),
          ),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.keyboard_voice), onPressed: null),
              Flexible(
                child: Container(
                    height: 40,
                    margin: EdgeInsets.fromLTRB(10, 6, 10, 6),
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                        color: Colors.black12,
                        width: 0.5,
                        style: BorderStyle.solid,
                      ),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: '輸入內(nèi)容', border: InputBorder.none),
                    )),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
                child: IconButton(icon: Icon(Icons.add_circle_outline),onPressed: null,),
              )
            ],
          ),
        ],
      ),
    );
  }

到此，就實現(xiàn)了圖中所示效果。
下面是item的布局代碼：

Widget _msgHolder(MessageBean message, BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double _maxWidth = width * 0.65;
    return Row(
      textDirection: message.from.pin == myInfo.pin?TextDirection.rtl:TextDirection.ltr,
      children: <Widget>[
        CircleAvatar(
          backgroundImage: AssetImage(message.from.avatarUrl == null
              ? "assets/drawable/ava_group.png"
              : message.from.avatarUrl),
        ),
        GestureDetector(
            onLongPress: () {
              _showList(options);
            },
            child: Container(
              constraints: BoxConstraints(
                  minWidth: 0,
                  maxWidth: _maxWidth,
                  minHeight: 0,
                  maxHeight: double.infinity),
              margin: EdgeInsets.fromLTRB(10, 5, 5, 10),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                  width: 0.5,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                _getMessage(message),
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            )),
      ],
    );
  }

Widget的顯示與隱藏
Flutter知識點: Widget隱藏與顯示

8、Toast和Dialog

在聊天中，常見操作是長按消息，彈出一個具有選項的Dialog，那么在Flutter中如何顯示常見的Toast和Dialog呢？
由于Flutter提供給安卓的大部分Widget都是基于Material設(shè)計的，所以Flutter并沒有提供Toast控件，而是提供了SnackBar。

//SnackBar的顯示
Scaffold.of(context).showSnackBar(SnackBar(
     content: Text("長按消息"),
));

SnackBar不止能夠顯示Text，還可以任意加入widget。
此處有坑：
關(guān)于上段代碼中的context（BuildContext），你在任何方法里都可以取到context，但是運行起來很可能會遇到context為null的情況，那么就需要傳入一個經(jīng)過了實例化的BuildContext。比如Scaffold中或者ListView.builder中的context，傳給SnackBar即可。

Dialog：
Flutter為Android提供了Dialog，AlertDialog，SimpleDialog三種常用對話框。想要實現(xiàn)我們的需求用SimpleDialog剛合適，效果如下：

彈窗.jpg

showDialog<int>(
        context: context,
        builder: (BuildContext context) {
          return new SimpleDialog(
            children: options.map((value) {
              return new SimpleDialogOption(
                onPressed: () {
                  Navigator.pop(
                      context,
                      options.indexOf(
                          value)); //here passing the index to be return on item selection
                },
                child: new Text(
                  value,
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ), //item value
              );
            }).toList(),
          );
        })

9、數(shù)據(jù)存儲

Flutter知識點:數(shù)據(jù)存儲之SharedPreferences
Flutter知識點:數(shù)據(jù)存儲之File
Flutter知識點:數(shù)據(jù)存儲之sqflite
官網(wǎng)sqflite頁面
下面的字段不能用于表的屬性名稱

"add","all","alter","and","as","autoincrement","between","case","check","collate","commit","constraint","create","default","deferrable","delete","distinct","drop","else","escape","except","exists","foreign","from","group","having","if","in","index","insert","intersect","into","is","isnull","join","limit","not","notnull","null","on","or","order","primary","references","select","set","table","then","to","transaction","union","unique","update","using","values","when","where"

10、Flutter常用插件

  audio_recorder: any #錄音、播放
  flutter_sound: ^1.1.5#錄音
  dropdown_menu: ^1.1.0#下拉菜單
  simple_permissions:#權(quán)限獲取
  easy_alert:#彈框
  amap_location: any #高德地圖
  location: any #gogle位置獲取
  barcode_scan 0.0.8#二維碼識別qr_mobile_vision: ^0.1.0 #二維碼識別 這個不好用
  flutter_screenutil: ^0.3.0#屏幕適配工具類  
  flutter_spinkit: ^2.1.0#加載等待框
  lpinyin: ^1.0.6#漢字轉(zhuǎn)拼音
  shimmer: ^0.0.4#微光效果控件
  qr_flutter: ^1.1.3#二維碼生成
  url_launcher: any#啟動URL的Flutter插件。支持網(wǎng)絡(luò)，電話，短信和電子郵件
  datetime_picker_formfield: ^0.1.3#時間選擇控件
  flutter_picker: '^1.0.0'#選擇器
  common_utils: '^1.0.1'#工具類 時間、日期、日志等
  flutter_html: '^0.8.2'#靜態(tài)html標記呈現(xiàn)為Flutter小部件
  fluwx: '^0.3.0'#微信支付、分享、登錄
  tobias: '^ 0.0.6#支付寶
  cupertino_icons: '^0.1.2'#小圖標控件
  http: '^0.11.3+16'#網(wǎng)絡(luò)請求
  html: '^0.13.3'#html解析
  image_picker: '^0.4.5'#圖片選擇（相冊或拍照）
  flutter_webview_plugin: any#webview展示
  fluttertoast: any#toast提示框
  shared_preferences: '^0.4.2'#shared_preferences存儲
  transparent_image: '^0.1.0'#透明圖片控件
  flutter_swiper : '^1.0.2'#輪播圖
  charts_flutter: '^0.4.0'#統(tǒng)計圖表
  path_provider: '^0.4.1'#獲取系統(tǒng)文件
  cached_network_image: '0.4.1'#加載網(wǎng)絡(luò)圖片并本地緩存
  sqflite: '^0.11.0+1'#sqllite數(shù)據(jù)庫操作
  pull_to_refresh: '^1.1.5'#下拉刷新上拉加載更多
  video_player: '0.6.1'#視頻播放
  collection: '1.14.11'#集合操作工具類
  device_info: '0.2.1'#獲取手機信息
  flutter_svg: '^0.3.2'#展示svg圖標控件
  intl: any#國際化工具類
  connectivity: '0.3.1'#鏈接網(wǎng)絡(luò)
  flutter_staggered_grid_view:#瀑布流展示控件
  flutter_file_manager:#文件管理
  loader_search_bar:#導(dǎo)航欄搜索控件
  flutter_image_compress : any#圖片壓縮
  ota_update : any#App下載更新
  flutter_slidable：#item側(cè)滑控件

——end