【Flutter 學習筆記】最基本的應用程式 Hello World 結構介紹
【Flutter 學習筆記】🎬 教學影片：連結
【Flutter 學習筆記】📚 文章目錄：連結
在前幾堂課中，我們已經逐步介紹了如何搭建 Flutter 開發環境，並學習了 Flutter 的核心程式語言——Dart。我們從零開始，學習了變數宣告、資料型別、運算符號、條件控制、迴圈、函數等基本語法，掌握了 Dart 的核心概念。
如果你對這些內容還不熟悉，建議先回去複習之前的課程。今天，我們將延續這個主題，學習如何建立第一個 Flutter 應用程式。如果你不確定如何從零開始建立一個全新的 Flutter 應用程式，或是如何將程式編譯並佈署到模擬器或手機上進行測試，請先回去複習之前的課程，這裡就不再贅述。
使用 Empty Application 範本建立全新 Flutter 應用程式
當我們選擇 Application 範本來建立 Flutter 應用程式時，會自動附帶一個計數器的功能。如果選擇的是 Empty 範本，則會得到一個最基本的 Flutter 應用程式結構——Hello World。
Hello World 程式
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
/*
Youtube 搜尋 : HKT 線上教室
訂閱／按譖／分享／加入會員
🇹🇼 支持創作更多教學 🇹🇼
*/
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('HKT線上教室'),
),
),
);
}
}
按下快捷鍵 F5，即可編譯並執行程式碼，並在選擇的裝置上看到執行結果。
接下來，我們來看看這個最基本的應用程式結構。
1. 匯入 Flutter 套件
import 'package:flutter/material.dart';
這行程式碼是用來匯入 Flutter 的 Material 套件。Material 套件是 Flutter 的 UI 設計套件，提供了許多現代化且美觀的 UI 元件。如果你對這些元件感興趣，可以到官方網站查詢更多資訊。
如果我們不匯入 Material 套件，會看到許多紅色波浪線，表示找不到相關的套件。此時，我們可以將鼠標移到紅色波浪線上，並在提示區選擇快速修復，或使用快捷鍵（Windows: Ctrl + . / macOS: Command + .）來自動匯入 Material 套件。
2. 主函數
void main() {
runApp(MainApp());
}
main 函數是程式的進入點，也是 Flutter 應用程式的啟動點。runApp 函數是 Flutter 提供的用來啟動應用程式的函數，括號內需要傳入一個 Widget 元件。
3. 定義 MainApp 類別
class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('HKT 線上教室'),
),
),
);
}
}
在這裡，我們定義了一個 MainApp 類別，並繼承自 StatelessWidget。StatelessWidget 是用來建立無狀態的 Widget，這意味著這個 Widget 不會有任何狀態變化或互動事件。
如果需要建立有互動事件的 Widget，則應該繼承自 StatefulWidget。在這個例子中，由於我們的應用程式只是顯示純文字，並不需要互動，因此選擇 StatelessWidget。
4. build 方法
StatelessWidget 必須實作 build() 方法來定義 UI 結構。在 build 方法中，我們返回一個 MaterialApp Widget，這是用來建立一個 Material Design 的應用程式。
5. Scaffold 和 Center
Scaffold(
body: Center(
child: Text('HKT 線上教室'),
),
)
MaterialApp 的 home 參數指定了 Scaffold，而 Scaffold 提供了一個基本的應用程式框架結構，包括 AppBar、底部導航列、抽屜選單等。在 Scaffold 的 body 參數中，我們使用 Center Widget，這可以將子元件（即 child 參數指定的 Widget）放在畫面的正中央。
6. Text Widget
Text('HKT 線上教室')
在這裡，我我們使用 Text Widget 來顯示文字。你可以將文字內容更改為任何你想要的字串，例如「HKT 線上教室」。這樣的設計讓我們能夠輕鬆地在應用程式中顯示靜態文字。
7. Widget 樹狀結構
整個應用程式的結構可以視為一個巢狀的 Widget 樹狀結構，這在 Flutter 中是非常常見的。我們可以這樣理解：
- MaterialApp 的 home 參數指定了 Scaffold。Scaffold 的 body 參數指定了 Center。Center 的 child 參數則是用來指定要顯示的元件內容，即 Text。
這樣的結構讓我們能夠清晰地組織和管理應用程式的 UI 元件。
總結
今天的課程中，我們學習了 Flutter 最基本的應用程式結構，並逐步拆解了每個部分的功能與用途。從匯入套件、定義主函數、建立 Widget 類別，到使用 Scaffold 和 Center，每一步都為我們的應用程式奠定了基礎。
你可能也想看
