基礎知識篇
安裝開發環境流程：
Fltter檔案構造：
- lib：主要的 Dart 代碼存放處，包含應用程式的主要邏輯和功能。
- test：用於存放測試代碼的地方。在這個資料夾中，你可以編寫單元測試和集成測試。
- android：Android 平台的原生代碼存放處。通常你不太需要直接操作這個資料夾，除非你有特定的 Android 平台需求。
- ios： iOS 平台的原生代碼存放處。與 android 資料夾一樣，大多數情況下你不需要直接處理這個資料夾。
- assets：存放應用程式資源檔案的地方，如圖片、字體文件等。在 Dart 代碼中，你可以使用 AssetImage 或類似的類來訪問這些資源。
- test 中的 widget_test.dart 文件（可選）：默認的測試文件，用於測試應用程式的 Widget。你可以在這裡添加和擴展測試。
Fltter教學資源：
Flutter專案架構：
Flutter的App按照Dart語言編程，按照framework建立App，並且由Engine轉成C/C++供不同平台運行，如果需要將APP建立到其他平台，使用嵌入器去橋接。
- Framework：
Flutter的「框架」指的是開發人員用來構建Flutter應用程式的一系列庫、套件和API。
它包括Flutter SDK（軟體開發工具包），提供了一套用於開發跨平台移動應用程式的工具、庫和運行時。
這個框架包含用於建立用戶界面、處理用戶輸入、管理狀態以及與設備功能交互的核心功能。
- Engine：
「引擎」是Flutter框架的底層核心。它負責渲染圖形、處理輸入事件以及與底層平台（iOS或Android）交互。
Flutter使用一個稱為Skia的可攜式圖形引擎來呈現UI元素，確保在不同平台上保持一致的視覺效果。
這個引擎橋接了高層Flutter框架與特定平台API之間的差異，使Flutter應用程式能夠在iOS和Android上無縫運行。
- Embedder：
「嵌入器」是將Flutter集成到特定平台的組件，無論是iOS、Android還是其他目標平台。對於移動應用程式，有特定於平台的嵌入器：flutter_embedder用於Android，Flutter.framework用於iOS。這些嵌入器提供了Flutter引擎與底層平台通信所需的鉤子。
這些嵌入器處理諸如初始化Flutter引擎、管理Dart與本機代碼之間通信以及提供特定於平台功能的橋接等任務。
除了移動平台之外，Flutter還可以嵌入到其他環境中，例如桌面應用程序和Web瀏覽器，每個環境都有自己的嵌入器。
Flutter Frameworks詳細介紹
- Material & Cupertino：為了統一設計風格，Flutter提供Material框架用來設計程式，可以達到一致的風格，同時有豐富的UI庫，包括各種Widgets。同樣的為了iOS的風格，Cupertino框架的部件和元件遵從蘋果的人機界面指南。
- Widgets：Material與Cupertino各有自己的Widgets。
- Rendering：使用Skia引擎進行渲染，確保不同平台風格一致。
- Fundation：Foundation是Flutter框架的底層組件，提供了許多核心功能，如異步編程、集合（Collections）、數據處理等。它包含一組基本的類別，可用於構建更高級的應用程式邏輯。
Material的架構：
- MaterialApp：Flutter是一個宣告式 UI 框架(Declarative UI Framework)，跟網頁框架如HTML非常相似。
- Title& Home：MaterialApp可以設定Title(如網頁中的Head)，並且在Home(如網頁中的Body)建立實際秀出來的可視區域。
- Scaffold：Home底下可以導入一個Scaffold的一個架構套件，包含頂部欄AppBar(上邊欄)、Body(身體)。其餘的還可以加入例如Drawer(側邊選單、BottomNavigationBar(底部導航欄、FloatingActionButton(懸浮按鈕)等等等等的Widgets。
實作
- 建立新專案
上邊欄打上>Flutter: New Project→選擇名稱與資料夾位置 →完成。
- 嘗試打開模擬器Android
第一次運行會很久，可以看到VSCode的terminal後台運作的狀態，需要下載並且安裝一些程序，就等一下。
- Code與細部介紹：
//導入material.dart 才可以運行
import 'package:flutter/material.dart';
//Dart 程式的入口點。程式從這個 main 函數開始執行
void main() {
//runApp 是 Flutter 應用程式的入口，它接受一個 Widget 並將它作為應用程式的根 Widget。在這個例子中，根 Widget 是一個 MaterialApp
runApp(
//MaterialApp 是一個提供基本 Material Design 布局的 Flutter Widget。它包裝了整個應用程式，提供了一個 home 屬性，指定應用程式的主頁面。
MaterialApp(
//Scaffold 是一個 Material Design 應用程式的基本架構。它包含了應用程式的主要結構元素，例如 AppBar、Drawer 和主要內容區域。
home: Scaffold(
//AppBar 是應用程式的頂部欄，通常包含應用程式的標題。
appBar: AppBar(
title: Text("AppBar"),
backgroundColor: Colors.green, // AppBar的背景顏色為綠色
),
//Drawer 是側邊欄的 Widget，通常用於顯示應用程式的導覽選項。
drawer: Drawer(
child: Container(
color: Colors.green, // 深綠色背景
child: Center(
child: Text("側邊欄", style: TextStyle(color: Colors.white)),
),
),
),
//body 是 Scaffold 的主要內容區域，這裡使用了一個 Container Widget，用來將其子 Widget 置中顯示。
body: Container(
color: Colors.grey[200], // 淺灰色背景
child: Center(
//Column 是一個垂直排列的 Widget，它的子元素是一個 Text Widget 的 List，這樣可以在主要內容區域顯示多行文字。
child: Column(
//放入多個子物件用children
children: <Widget>[
//文字Widget
Text("Here is Body:"),
Text(
"Let's paste a picture!",
),
//圖片Widget
Padding(
padding: EdgeInsets.all(20.0),
child: Image.asset("assets/kithub_ico_full1024.png"),
),
],
),
),
),
),
),
);
}- 模擬器結果：
按照架構建立AppBar(綠色區)、Body(灰色區)，外加一個Drawer(綠色)。Body區再添加一個Column Wedgets去放兩個文字Widget&圖片Wedget。
