已發布·持續改進
Framework · 2017 年發布
Flutter 是 Google 推出的開源 UI 框架,用一套 Dart 程式碼就能打造行動、Web 與桌面應用程式。
Flutter 是 Google 開發的開源 UI 框架,於 2017 年首次發布。一套程式碼即可打造 Android、iOS、Web、Windows、macOS 與 Linux 應用程式。應用程式以 Google 的 Dart 語言撰寫;Dart 是一種物件導向語言,語法與 Java、TypeScript 相近,支援空值安全與 async/await,Dart SDK 隨 Flutter 一併提供。
Flutter 不使用各平台的原生 UI 元件,而是以自己的算繪引擎繪製每一個像素。因此應用程式在各平台上的外觀與行為一致,自訂設計與動畫也不受限制。發布建置會將 Dart 程式碼預先編譯成機器碼,開發時則能透過熱重載在保留應用程式狀態的同時立即看到程式碼變更。正因如此,Flutter 在需要同時上架多個平台的行動應用程式中特別常見。
入門時,建議先安裝 Flutter SDK,以 flutter doctor 檢查開發環境,再透過修改 flutter create 產生的計數器應用程式來理解 widget 的概念。搭配官方 codelab 與 Dart 語言指南,就能循序漸進地學習 widget 組合、狀態管理與版面配置。所需的套件可在 pub.dev 上尋找,並以 flutter pub add 加入。
同一份 Dart 程式碼即可建置 Android、iOS、Web、Windows、macOS 與 Linux 應用程式,只在需要時補上平台專用程式碼。
文字、間距、版面乃至整個畫面都是 widget,複雜的介面由小型 widget 組合而成。
程式碼變更約一秒內就會出現在執行中的應用程式裡,而且不會遺失應用程式狀態。
Flutter 引擎自行繪製每個像素,發布建置預先編譯成機器碼,執行流暢。
在 VS Code 安裝 Flutter 擴充功能並讓它自動下載 SDK,或從 docs.flutter.dev 下載對應作業系統的 SDK,解壓縮後將其中的 bin 資料夾加入 PATH。Dart SDK 已包含在內。
執行 flutter doctor,確認 Android Studio、Xcode、Chrome、Visual Studio 等各目標平台所需的工具是否齊全。只需準備要建置的平台對應的工具。
flutter doctor以 flutter create 建立專案,並在已連接的裝置、模擬器或瀏覽器上執行。執行期間儲存程式碼,熱重載會立即套用變更。
flutter create hello_app && cd hello_app && flutter run每個 Flutter 應用程式都從 lib/main.dart 的 main 函式開始,傳給 runApp 的 widget 會佔滿整個畫面。MaterialApp 提供 Material Design 應用程式的基本骨架,Scaffold 提供單一畫面的基礎版面,Center 與 Text 則在中央顯示文字。將 flutter create 產生的 main.dart 換成這段程式碼,再以 flutter run 執行即可。
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(child: Text('Hello, world!')),
),
),
);
}
flutter create hello_app && cd hello_app && flutter run共六章,帶你從安裝一步步認識 Flutter 的核心概念。
在這裡提問、分享經驗,交流關於 Flutter 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。