Flutter簡介
Flutter是google推出的，一個使用Dart語言開發的跨平台移動UI框架，通過自建繪制引擎，能高性能、高保真地進行Android和IOS開發。
Flutter是什么
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。
為什么采用dart
Flutter采用Dart語言進行開發，而並非Java，Javascript這類熱門語言，這是Flutter團隊對當前熱門的10多種語言慎重評估后的選擇。因為Dart囊括了多數編程語言的優點，它更符合Flutter構建界面的方式
Flutter vs ReactNative框架對比
| ReactNative | Flutter |
|---|---|
 |
 |
ReactNative
- 采用Javascript開發，需學React，成本高
- 需要JavaScript橋接器，實現JS到Native轉化，性能耗損
- 訪問原生UI，頻繁操作易出性能問題
- 支持線上動態性，可有效避免頻繁更新版本
Flutter
- 采用Dart開發,可直接編譯成Native代碼（易學）
- 自帶UI組件和渲染器，僅依賴系統提供的Canvas（無橋接耗損）
- 暫不支持線上動態性
Flutter是革命性的
Flutter將UI組件和渲染器從平台移動到應用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas，以便定制的UI組件可以出現在設備的屏幕上，以及訪問事件（觸摸，定時器等）和服務（位置、相機等）。
Dart程序（綠色）和執行數據編碼和解碼的原生平台代碼（藍色，適用於iOS或Android）之間仍然有一個接口，但這能比JavaScript橋接器快幾個數量級。
Flutter的特性
快速開發
毫秒級的熱重載，修改后，您的應用界面會立即更新。使用豐富的、完全可定制的widget在幾分鍾內構建原生界面。
富有表現力和靈活的UI
Flutter內置美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平台感知，為您的用戶帶來全新體驗。
原生性能
Flutter包含了許多核心的widget，如滾動、導航、圖標和字體等，這些都可以在iOS和Android上達到原生應用一樣的性能。
熱重載
Flutter最受歡迎的功能之一是其快速，保留程序狀態的熱重載 （hot reload）。 您可以在Flutter應用程序運行時對其進行更改，重新加載應用程序的代碼，將其從之前的操作位置繼續下去。一次熱重載通常用不到一秒鍾。 如果您的應用遇到錯誤，您通常可以修復錯誤，然后繼續，就像錯誤從未發生過。 即使你必須完全重新加載，它也是很快速的。
Flutter開發環境搭建
在Flutter中文網上，關於搭建開發環境的教程已經寫得比較詳細了
Windows及Linux上配置開發環境跟Mac上類似，都是clone代碼，配置環境變量，運行flutter doctor，配置IDE這幾步，具體配置過程就不贅述了，大家可以參考Flutter中文網中的教程：
Dart編程語言快速入門
Dart是Google推出的一門編程語言，吸收了現代編程語言的高級特性，目前Dart的版本是Dart2，官網是：www.dartlang.org/
Developers at Google and elsewhere use Dart to create high-quality, mission-critical apps for iOS, Android, and the web. With features aimed at client-side development, Dart is a great fit for both mobile and web apps.
Dart致力於客戶端開發，非常適合移動和Web應用程序。
Dart語言的特性
- Productive（生產力高，Dart的語法清晰明了，工具簡單但功能強大）
- Fast（執行速度快，Dart提供提前優化編譯，以在移動設備和Web上獲得可預測的高性能和快速啟動。）
- Portable（易於移植，Dart可編譯成ARM和X86代碼，這樣Dart移動應用程序可以在iOS、Android和其他地方運行）
- Approachable（容易上手，充分吸收了高級語言特性，如果你已經知道C++，C語言，或者Java，你可以在短短幾天內用Dart來開發）
- Reactive（響應式編程）
Dart的一些重要概念
- 在Dart中，一切都是對象，所有的對象都是繼承自
Object - Dart是強類型語言，但可以用
var或dynamic來聲明一個變量，Dart會自動推斷其數據類型,dynamic類似c# - 沒有賦初值的變量都會有默認值
null - Dart支持頂層方法，如
main方法，可以在方法內部創建方法 - Dart支持頂層變量，也支持類變量或對象變量
- Dart沒有
publicprotectedprivate等關鍵字，如果某個變量以下划線（_）開頭，代表這個變量在庫中是私有的
Dart一些語法特點
如果熟悉java或者c#，只需要注意下面的一些語法特性即可，其他的都比較類似，不用特意關注。
命名參數
sayHello({String name}) {
print("hello, my name is $name");
}
sayHello2({name: String}) {
print("hello, my name is $name");
}
main() {
// 打印 hello, my name is zhangsan
sayHello(name: 'zhangsan');
// 打印 hello, my name is wangwu
sayHello2(name: 'wangwu');
}
參數默認值
// 位置參數的默認值
int sum(int a, int b, [int c = 3]) {
return a + b + c;
}
匿名函數
test(Function callback) {
callback("hello");
}
main() {
test((param) {
// 打印hello
print(param);
});
}
is
和c#一樣， is運算符用於判斷一個變量是不是某個類型的數據
// is!則是判斷變量不是某個類型的數據
var s = "hello";
print(s is String); // true
var num = 6;
print(num is! String); // true
??= 和 ?.運算符
??=運算符 如果 ??= 運算符前面的變量為null，則賦值，否則不賦值
var param1 = "hello", param2 = null;
param1 ??= "world";
param2 ??= "world";
print("param1 = $param1"); // param1 = hello
print("param2 = $param2"); // param2 = world
?.運算符
var str1 = "hello world";
var str2 = null;
print(str1?.length); // 11
print(str2?.length); // null
print(str2.length); // 報錯
..運算符（級聯操作）
使用..調用某個對象的方法（或者成員變量）時，返回值是這個對象本身，這樣就能方面實現鏈式調用：
class Person {
eat() {
print("I am eating...");
}
sleep() {
print("I am sleeping...");
}
study() {
print("I am studying...");
}
}
main() {
// 依次打印
// I am eating...
// I am sleeping...
// I am studying...
new Person()..eat()
..sleep()
..study();
}
不一樣的try/catch
// try catch語句
try {
print(1 ~/ 0);
} catch (e) {
// IntegerDivisionByZeroException
print(e);
}
try {
1 ~/ 0;
} on IntegerDivisionByZeroException { // 捕獲指定類型的異常
print("error"); // 打印出error
} finally {
print("over"); // 打印出over
}
類（Class）
- 不需要用private, protected, public等修飾成員變量或成員函數
- 構造函數可以不用方法體，自動對應
class Person {
String name;
int age;
String gender;
Person(this.name, this.age, this.gender);
sayHello() {
print("hello, this is $name, I am $age years old, I am a $gender");
}
}
getter/setter方法
class Rectangle {
num left, top, width, height;
// 構造方法傳入left, top, width, height幾個參數
Rectangle(this.left, this.top, this.width, this.height);
// right, bottom兩個成員變量提供getter/setter方法
num get right => left + width;
set right(num value) => left = value - width;
num get bottom => top + height;
set bottom(num value) => top = value - height;
}
mixins
mixins是一個前端很火的概念，是一個重復使用類中代碼的方式。
class A {
a() {
print("A's a()");
}
}
class B {
b() {
print("B's b()");
}
}
// 使用with關鍵字，表示類C是由類A和類B混合而構成
class C = A with B;
main() {
C c = new C();
c.a(); // A's a()
c.b(); // B's b()
}
異步
Dart提供了類似ES7中的async await等異步操作，這種異步操作在Flutter開發中會經常遇到，比如網絡或其他IO操作，文件選擇等都需要用到異步的知識。 async和await往往是成對出現的，如果一個方法中有耗時的操作，你需要將這個方法設置成async，並給其中的耗時操作加上await關鍵字，如果這個方法有返回值，你需要將返回值塞到Future中並返回，如下代碼所示：
Future checkVersion() async {
var version = await lookUpVersion();
// Do something with version
}
下面的代碼使用Dart從網絡獲取數據並打印出來：
import 'dart:async';
import 'package:http/http.dart' as http;
Future<String> getNetData() async{
http.Response res = await http.get("http://www.baidu.com");
return res.body;
}
main() {
getNetData().then((str) {
print(str);
});
}
關於Dart異步操作，可以查看這篇文章了解更多。
本文參考
- https://juejin.im/post/5b5005866fb9a04fea589561
- https://juejin.im/post/5b456ebee51d4519277b7761?utm_medium=flutter&utm_source=weixinqun
作者：Jadepeng
出處：jqpeng的技術記事本--http://www.cnblogs.com/xiaoqi
您的支持是對博主最大的鼓勵，感謝您的認真閱讀。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。