基本介紹
產生背景,版本記錄,示例代碼,框架特性,快速開發,絢麗UI,回響式,框架結構,最新資訊,
產生背景
Flutter可以方便的加入現有的工程中。在全世界，Flutter 正在被越來越多的開發者和組織使用，並且 Flutter是完全免費、開源的。它也是構建未來的 Google Fuchsia 套用的主要方式。
Flutter組件採用現代回響式框架構建，這是從React中獲得的靈感，中心思想是用組件(widget)構建你的UI。 組件描述了在給定其當前配置和狀態時他們顯示的樣子。當組件狀態改變，組件會重構它的描述(description)，Flutter 會對比之前的描述， 以確定底層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改。
版本記錄
Flutter的第一個版本被稱為“Sky”，運行在Android作業系統上。它是在2015年Dart開發者峰會上亮相的，其目的是能夠以每秒120幀的速度持續渲染。
Beta
Beta1版本於2018年2月27日在2018 世界移動大會公布。
Beta2版本2018年3月6日發布。
1.0版本於2018年12月5日(台北時間)發布。
2.0版本於2021年3月4日(台北時間)發布。
3.0版本於2022年5月12日(台北時間)發布。
示例代碼
Hello World！
import 'package:flutter/material.dart';
void main() {
runApp(new Center(
child: new Text('Hello World!')
));
}
在Dart2.0版本之後，可以省略new。
import 'package:flutter/material.dart';
void main() {
runApp(Center(
child: Text('Hello World!')
));
}
runApp函式接收給定的組件(Widget)並使其成為組件樹的根。 在此例中，組件樹由兩個組件構成，Center組件和它的子組件-Text組件。框架強制根組件覆蓋整個螢幕，這意味著“Hello, world”文本在螢幕上居中顯示。需要注意的是，上面的例子中，文字的樣式是預設的。不必擔心，當使用MaterialApp時，它會使用 Material Design 樣式。
在編寫app時，通常會創建獨立組件，是繼承無狀態的StatelessWidget還是有狀態的StatefulWidget， 取決於您的組件是否需要管理狀態。組件的主要工作是實現一個build函式，它使用其他低級別的組件來構建自己。Flutter框架將依次構建這些組件，最終會到達代表底層渲染對象的組件-RenderObject，它會計算並描述組件的幾何形狀。
框架特性
快速開發
Flutter
絢麗UI
通過Flutter內建的漂亮的質感設計和Cupertino（ios-flavor）小工具、豐富的動畫API，平滑的自然滾動和平台感知，讓用戶感到滿意。
回響式
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 通知Flutter框架狀態已改變
// 因此框架可以運行build()並更新顯示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 這個方法會在每次setState調用時運行
// Flutter框架已經對重複快速運行build方法進行最佳化
// 因此你可以僅更新你想要更新的任何東西，而不必
// 更新整個組件實例。
return Row(
children: <Widget>[
RaisedButton( o
nPressed: increment,
child: Text('Increment'),
),
Text('Count: $counter'),
],
);
}
}訪問原生功能
通過平台api、第三方sdk和原生代碼使您的套用變得生動起來。Flutter讓您可以重用您現有的java、swift和Objc代碼，並在iOS和Android上訪問原生特性和SDK。
訪問平台功能非常簡單。這是互操作示例的片段：
Future<Null> getBatteryLevel() async {
var batteryLevel = 'unknown';
try {
int result = await methodChannel.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level: $result%';
} on PlatformException {
batteryLevel = 'Failed to get battery level.';
}
setState(() {
_batteryLevel = batteryLevel;
});
}
框架結構
Flutter的主要結構包括：
- Flutter engine
- Foundation library
- Design-specific widgets
