【Flutter 學習筆記】最基本的應用程式 Hello World 結構介紹

更新於 發佈於 閱讀時間約 7 分鐘
raw-image
【Flutter 學習筆記】🎬 教學影片:連結
【Flutter 學習筆記】📚 文章目錄:連結

在前幾堂課中,我們已經逐步介紹了如何搭建 Flutter 開發環境,並學習了 Flutter 的核心程式語言——Dart。我們從零開始,學習了變數宣告、資料型別、運算符號、條件控制、迴圈、函數等基本語法,掌握了 Dart 的核心概念。

如果你對這些內容還不熟悉,建議先回去複習之前的課程。今天,我們將延續這個主題,學習如何建立第一個 Flutter 應用程式。如果你不確定如何從零開始建立一個全新的 Flutter 應用程式,或是如何將程式編譯並佈署到模擬器或手機上進行測試,請先回去複習之前的課程,這裡就不再贅述。

使用 Empty Application 範本建立全新 Flutter 應用程式

raw-image

當我們選擇 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,即可編譯並執行程式碼,並在選擇的裝置上看到執行結果。

raw-image


接下來,我們來看看這個最基本的應用程式結構。


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,每一步都為我們的應用程式奠定了基礎。

留言
avatar-img
留言分享你的想法!
avatar-img
HKT實驗室
24會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
在本文中,我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件,使用者可以輕鬆地輸入文字,廣泛應用於各類應用程式中,如表單、搜尋框和聊天介面等。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/28
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
2024/11/26
這篇文章深入探討了 Flutter 框架中的 ElevatedButton(漂浮按鈕)元件。文章介紹了其基本用法,包括必填參數 onPressed 和 child 的解析,並示範了如何使用匿名函數來處理按鈕點擊事件。此外,還說明了如何設定按鈕的顏色和形狀,並提供了完整的範例程式碼。
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
在本篇教學中,我們介紹了 Flutter 中的 Row 和 Column 佈局容器,並探討了它們的基本用法及進階技巧。此外,我們還提到如何使用快捷鍵來格式化程式碼,以提升可讀性。
Thumbnail
在本篇教學中,我們介紹了 Flutter 中的 Row 和 Column 佈局容器,並探討了它們的基本用法及進階技巧。此外,我們還提到如何使用快捷鍵來格式化程式碼,以提升可讀性。
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
介紹了在 Windows 和 macOS 上如何建置 Flutter Android 應用程式開發環境的方法。包括硬體需求、軟體需求、安裝開發工具、設置 Android 開發環境、驗證安裝及開始開發等步驟。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
主要介紹 Windows 和 macOS 的 Flutter 開發環境。需下載安裝 Flutter SDK 、 Visual Studio Code 、Android Studio 等相關可以開發 Android app; macOS 則需安裝 Xcode 等相關可以開發 iPhone app 。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
現在,開始建立第一個檔案吧,一樣用最簡單的 Hello World 示範。 在 kotlin 資料夾按右鍵選擇 New 裡的 Kotlin File/Class 。 雖然有許多格式可以選,但其實只是 IDE 提供初始程式碼的差別,完全可以中途更改,我們這次選最基本的 File 格式就好。 命名檔案和
Thumbnail
現在,開始建立第一個檔案吧,一樣用最簡單的 Hello World 示範。 在 kotlin 資料夾按右鍵選擇 New 裡的 Kotlin File/Class 。 雖然有許多格式可以選,但其實只是 IDE 提供初始程式碼的差別,完全可以中途更改,我們這次選最基本的 File 格式就好。 命名檔案和
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News