Flutter 是什么
- Flutter是google最近正式推出的一款跨平臺的移動開發框架，目前處于Beta階段。
- Flutter將會作為Google最新移動系統Fuchsia OS的app framework。
Flutter的特點
- Dart可以運行前編譯（AOT），在開發flutter應用的時候布局文件會直接通過源碼編寫node tree，從而避免了大量的解析轉譯時間，使得Dart的效率比JS更高。
- Dart語言同樣支持JIT編譯，因此flutter可以hot reload，為開發周期提速。
- Dart沒有鎖的概念，可以做到對象回收和GC，Dart中的線程叫做isolates，因為不共享內存的原因，同時和js一樣是單線程操作，所以不會出現搶占調度和鎖死的問題。開發者控制線程的時候需要顯示創建線程，最常用的是async和await。
- Flutter用Dart語言開發，因為Flutter主要用來開發用戶界面，Dart語言的特性適合了用戶構建用戶界面時的操作邏輯，沒有像Android的xml文件和前端的html文件這樣的單獨布局文件，使得開發更簡潔，預覽更方便。
- Flutter不再受限于native，自己開發了一套渲染邏輯，因此在未來的性能優化和跨平臺想RN這些優勢會更加明顯。
項目結構
android 和 ios文件夾是常規的Android項目和ios項目結構，其中多了一些flutter的配置文件。
剩下的則是flutter的項目結構，其中lib文件夾里是dart代碼，pubspec.yaml則是flutter的項目配置文件和package的依賴。
name: first_flutter
description: A new Flutter application.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
http: '>=0.11.3+12'
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
引入package
- packagename: ^version 引入某個版本的package
- packagename: '>=version' 引入某個版本之后的package，用來約束最低或最高版本
最后注意，如果需要使用md風格的組件，一定要把uses-material-design設為true。
組件使用
Flutter中widget分兩種，分別是StatelessWidget和StatefulWidget，從名字就可以看出StatelessWidget是靜態的沒有變化的widget，
StatefulWidget則是根據狀態動態變化內容的widget。
先來看個簡單示例
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
可以看到：
第一行是引入package。
第二行main函數則是整個app的啟動方法，所以實際上每個flutter頁面在開發的時候都可以在dart文件上加上main方法來單獨啟動調試，十分方便。
剩下的MyApp類就是這個界面的代碼，App類繼承了StatelessWidget，這樣app自身就成了一個widget，可以說幾乎所有的東西都是widget，包括alignment和padding等等，這樣做的好處自然就是提升編寫代碼的流暢性。重寫的build方法就是界面顯示的代碼，這可以看成一個tree node結構，布局控件依次排列，直觀明了，home就是界面的主體內容，里面包括了頭部的appbar和剩下的body內容，body里面居中顯示了一個文本框。
如果我們想要動態修改文本框里面的內容，這就要用到StatefulWidget，同時要寫一個和widget對應的State類來給控件賦值。
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);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
...
body: new Center(
child: new RandomWords(),
),
),
);
}
}
布局問題不可能全部講完，有Android開發經驗的會很快上手，了解下來得出的結論是：fultter里面封裝了大量的material design風格的組件，但因為目前還處于beta版本，如果要實現更多自定義復雜的組件還是要編寫大量代碼實現，作為Fuchsia的官方框架，相信控件方面隨著版本迭代一定會越來越豐富，開發難度也會降低。
網絡請求
flutter提供了一個“http”的package，可以實現大部分的網絡請求功能，搭配JSON類可以解析json到實體類。http package雖然沒有做到那么全面，但是基本的網絡操作都已經能實現，后續版本會逐漸完善。
loadData() async {
String dataURL = "https://jsonplaceholder.typicode.com/posts";
http.Response response = await http.get(dataURL);
setState(() {
widgets = JSON.decode(response.body);
});
}
因為Dart本身是單線程的，所以這里為了避免阻塞UI，我們要使用async 和 await 關鍵字來支持異步操作。
Note：
在Dart2中，對于async關鍵字有一個break change，定義的異步方法不再會在隊列中被立即掛起，而是會同步執行直到第一次出現await。所以我們在使用的時候，只要每次調用async方法，都執行await即可，就無需關注操作的改變帶來的掛起和執行變化。
如果要執行并發操作，只需要為每個操作設定async和await關鍵字。
Future Api
除了上述進行異步操作的方法，Dart還提供了一套Future Api。在async和await之前（Dart1.9）就已被引入。
具體寫法如下：
functionA()
.then((aValue) => functionB())
.then((bValue) => functionC())
.then((cValue) => doSomethingWith(cValue));
printDailyNewsDigest() =>
gatherNewsReports()
.then((news) => print(news))
.catchError((e) => handleError(e));
圖片加載
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'load image',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => new _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
List widgets = [];
@override
void initState() {
super.initState();
loadData();
}
bool showLoadingDialog() {
if (widgets.length == 0) {
return true;
}
return false;
}
Widget getBody() {
if (showLoadingDialog()) {
return getProgressDialog();
} else {
return getListView();
}
}
Widget getProgressDialog() {
return new Center(child: new CircularProgressIndicator());
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Load Image"),
),
body: getBody());
}
ListView getListView() => new ListView.builder(
itemCount: widgets.length,
itemBuilder: (BuildContext context, int position) {
return getRow(position);
});
Widget getRow(int i) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: new Image.network("${widgets[i]["url"]}"));
}
void loadData() async {
String photoURL = "https://jsonplaceholder.typicode.com/photos";
http.Response response = await http.get(photoURL);
setState(() {
widgets = JSON.decode(response.body);
});
}
}
嘗試用listview 加載1000張純色圖，滑動的時候感覺不到卡頓，十分流暢。
看到別人分享了和rn在加載圖片的時候的性能對比,會提高一倍左右。
react native:
flutter
通信問題
java code
new MethodChannel(getFlutterView(), "app.channel.shared.data").setMethodCallHandler(new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if (methodCall.method.contentEquals("getSharedText")) {
result.success(sharedText);
sharedText = null;
}
}
});
}
dart code
getSharedText() async {
var sharedData = await platform.invokeMethod("getSharedText");
if (sharedData != null) {
setState(() {
....
});
}
}
數據存儲
1.Shared Preferences
import 'package:shared_preferences/shared_preferences.dart';
getData() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
int value = (prefs.getInt('<key-name>') ?? 0) + 1;
prefs.setInt('<key-name>', value);
}
2.SQLite
在pubspec.yaml中添加依賴：
dependencies:
...
sqflite: any
在源碼中import package：
import 'package:sqflite/sqflite.dart';
具體使用和sqlite操作大致相同
包體大小
引自官方FAQ
In June 2017, we measured the size of a minimal Flutter app (no Material Components, just a single Center widget, built with flutter build apk), bundled and compressed as a release APK, to be approximately 6.7MB.
For this simple app, the core engine is approximately 3.3MB (compressed), the framework + app code is approximately 1.25MB (compressed), the LICENSE file (contained in app.flx) is 55k (compressed), necessary Java code (classes.dex) is 40k (compressed), and there is approximately 2.1MB of (compressed) ICU data.
