入門網站：Flutter中文網 Flutter官網（英文）

Flutter特點：跨平臺（Flutter是Fuchsia的開發框架，同時支持Android、IOS），原生性能，熱重載。其官方編程語言為Dart，熟悉Dart語言。

1、導包

flutter使用的語言是dart，dart導包的規則如下：
（1）導包dart庫里面的包

import 'dart:html'; 

（2）導入pubspec.yaml 的dependencies依賴的包

import 'package:test/test.dart'; 

（3）導入路徑包，base為flutter根目錄

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

（4）只導入foo

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

（5）Im除了foo都導入

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

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

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

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

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

類似android開發中的Gradle配置文件，Flutter項目根目錄下的pubspec.yaml文件是Flutter的配置文件。

#name很重要，如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改 name: flutterdemo description: A new Flutter application. dependencies: flutter: sdk: flutter#添加依賴packagescupertino_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#字體設置fonts:- family: Schylerfonts:- asset: fonts/Schyler-Regular.ttf - asset: fonts/Schyler-Italic.ttfstyle: italic- family: Trajan Profonts: - asset: fonts/TrajanPro.ttf - asset: fonts/TrajanPro_Bold.ttf weight: 700 

2、關于MaterialApp和Scaffold：

MaterialApp是flutter提供給Android的一個基礎widget，采用了材料設計語言。
經過實踐，MaterialApp全局最好只有一個，作為主界面，app的主題、主頁可以在此定義。flutter默認會在debug模式下在右上角顯示水印，去除方式：

debugShowCheckedModeBanner: false 

開始每個page我都返回的MaterialApp，顯示是沒什么問題，因為都是widget，但是會出現卡頓和其他的問題。

子頁面直接返回Scaffold，Scaffold是MaterialApp的布局實現，提供了appbar，floatingActionButton，drawer，bottomNavigationBar等MD風格的控件api。

3、Flutter框架給我們提供了StatelessWidget和StatefulWidget兩個抽象類，用于自定義控件。

（1）StatelessWidget是‘‘無狀態控件’’,不可變狀態控件,通過構建其他控件來描述用戶界面的一部分。必須實現build方法，返回一個widget對象。 Icon、 IconButton, 和Text等都是無狀態widget, 他們都是 StatelessWidget的子類。
（2）StatefulWidget 是動態的. 用戶可以和其交互 (例如輸入一個表單、 或者移動一個slider滑塊),或者可以隨時間改變 (也許是數據改變導致的UI更新).Checkbox, Radio, Slider,Form, 和TextField 都是 stateful widgets, 他們都是 StatefulWidget的子類。

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

class RedBoard extends StatelessWidget { const RedBoard({ Key key }) : super(key: key);@override Widget build(BuildContext context) { return new Container( color: Colors.red ); } } 

自定義可變狀態的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、TextField樣式

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

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

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如果使用系統提供的svg資源，需要指定顏色，不然在獲取焦點時會變成不可見狀態。

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方法。
經過查找，flutter不完全支持svg，xml格式的VectorDrawable在flutter上無法直接加載
類似Android中ImageView的scaleType屬性，flutter的Image控件也有其屬性Boxfit，而且這個屬性不僅僅適用于Image相關的Widget，FittedBox也具有此屬性。
FittedBox會在自己的尺寸范圍內縮放并且調整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"), ), ), ) 

看一下幾種縮放方式的區別：

image.png

7、Flutter構建布局

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

查看Flutter中文網的教程：在Flutter中構建布局

布局總結：
（1）Column和Row相對于Android中的LinearLayout，Column相對于Orientation.Vertical；Row相當于Orientation.Horizontal。
（2）ListView ，GridView與Android中的同名控件效果等同
ListTitle是Flutter封裝好的在列表中顯示的item控件，他有固定的顯示格式，如下：

ListTitle.jpg
（3）Stack相當于Android中的FrameLayout，但是它又具有RelativeLayout的一些屬性。
（4）Card相當于Android中的CardView
（5）事件響應：
Flutter并非為所有Widget都直接提供了點擊，長按等事件響應，這時我們需要用 GestureDetector這個widget包裹需要響應事件的widget來實現功能。
GestureDetector提供了如下手勢：
Tap
onTapDown 指針已經在特定位置與屏幕接觸
onTapUp 指針停止在特定位置與屏幕接觸
onTap tap事件觸發
onTapCancel 先前指針觸發的onTapDown不會在觸發tap事件
雙擊
onDoubleTap 用戶快速連續兩次在同一位置輕敲屏幕.
長按
onLongPress 指針在相同位置長時間保持與屏幕接觸
垂直拖動
onVerticalDragStart 指針已經與屏幕接觸并可能開始垂直移動
onVerticalDragUpdate 指針與屏幕接觸并已沿垂直方向移動.
onVerticalDragEnd 先前與屏幕接觸并垂直移動的指針不再與屏幕接觸，并且在停止接觸屏幕時以特定速度移動
水平拖動
onHorizontalDragStart 指針已經接觸到屏幕并可能開始水平移動
onHorizontalDragUpdate 指針與屏幕接觸并已沿水平方向移動
onHorizontalDragEnd 先前與屏幕接觸并水平移動的指針不再與屏幕接觸，并在停止接觸屏幕時以特定速度移動。
（6）Button：Flutter提供了幾種樣式的按鈕，分別為：
FlatButton：扁平的，沒有陰影效果的。
RaisedButton：有陰影效果的。
FloatingActionButton：懸浮按鈕，類似Android上同名的控件。
OutlineButton：線框按鈕，帶外邊框的按鈕。
（7）Expanded、Flexible：Expanded 這是個用來讓子項具有伸縮能力的widget，繼承自Flexible。它們兩個的默認靈活系數是一樣的，但是fit參數不同，Expanded是默認要占滿分配的空間的，而Flexible則默認不需要。
（8）Ripple效果：Flutter中文網將InkWell翻譯成“墨水飛濺”效果，其實看到效果后，我們馬上就能聯想到Android中的ripple效果。
inkwell.gif 用法也是用InkWell套起想要達到效果的widget，具體屬性查看源碼注釋。

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

聊天.png

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

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

image.jpg
Text本身是支持文字自動換行的，Container本身如果沒有父控件限制也是包裹的，但因為外面放了一個Row，就會出現溢出屏幕的問題。經過多番查找，我找到了一個Widget可以解決問題——Flexible，在Container外面套一個Flexible就能解決問題，此時需要注意的是，Flexible，Expanded等可以自適應的繼承了Flex的控件，其父控件也必須是同類型。

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

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

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

輸入框實現：
輸入框首先要保持在界面底部，怎么實現呢？了解到官方提供了一個BottomAppBar，將其設置給Scaffold中的bottomNavigationBar屬性。BottomAppBar的child給到一個Row控件，排列語音按鈕IconButton，輸入框TextField，更多按鈕IconButton。TextField外部要嵌套一個Container修飾樣式。運行后發現整個界面都無法顯示，而注釋掉TextField就可以顯示，由此想到應該是TextField的寬度不正常導致的，使用萬能控件Flexible套在TextField的父級Container外后顯示正常。
接下來試試輸入文字，又出現坑了！BottomAppBar在輸入法彈出時無法自動上移，確定了resizeToAvoidBottomPadding設置為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: '輸入內容', border: InputBorder.none), )), ), Container( margin: EdgeInsets.fromLTRB(0, 0, 10, 0), child: IconButton(icon: Icon(Icons.add_circle_outline),onPressed: null,), ) ], ), ], ), ); } 

到此，就實現了圖中所示效果。
下面是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設計的，所以Flutter并沒有提供Toast控件，而是提供了SnackBar。

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

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

Dialog：
Flutter為Android提供了Dialog，AlertDialog，SimpleDialog三種常用對話框。想要實現我們的需求用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、數據存儲

Flutter知識點:數據存儲之SharedPreferences
Flutter知識點:數據存儲之File
Flutter知識點:數據存儲之sqflite
官網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:#權限獲取 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#漢字轉拼音 shimmer: ^0.0.4#微光效果控件 qr_flutter: ^1.1.3#二維碼生成 url_launcher: any#啟動URL的Flutter插件。支持網絡，電話，短信和電子郵件 datetime_picker_formfield: ^0.1.3#時間選擇控件 flutter_picker: '^1.0.0'#選擇器 common_utils: '^1.0.1'#工具類 時間、日期、日志等 flutter_html: '^0.8.2'#靜態html標記呈現為Flutter小部件 fluwx: '^0.3.0'#微信支付、分享、登錄 tobias: '^ 0.0.6#支付寶 cupertino_icons: '^0.1.2'#小圖標控件 http: '^0.11.3+16'#網絡請求 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'#統計圖表 path_provider: '^0.4.1'#獲取系統文件 cached_network_image: '0.4.1'#加載網絡圖片并本地緩存 sqflite: '^0.11.0+1'#sqllite數據庫操作 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'#鏈接網絡 flutter_staggered_grid_view:#瀑布流展示控件 flutter_file_manager:#文件管理 loader_search_bar:#導航欄搜索控件 flutter_image_compress : any#圖片壓縮 ota_update : any#App下載更新 flutter_slidable：#item側滑控件 

——end

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18149.html