【Flutter 程式設計入門實戰 30 天】Day 4：第一支 Flutter 應用程式，Hello World
【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。
哈囉～大家好，我是 KT ，今天實戰第四天，KT 將為大家來介紹，開發第一支 Flutter APP 應用程式，Hello World。
最簡單的 Flutter 應用程式
我們這次範例，要試著在畫面正中間，顯示文字「第一個APP」。
// 載入 material 函式庫
import 'package:flutter/material.dart';
// main 是 Dart 程式，最一開始的進入點
void main() {
// runApp 是 Flutter 程式進入點，若沒有載入上方 material 函式庫，將會不認識 runApp。
// 放在 Center 容器裡面 Text 的元件，將會被放置在畫面的正中間
runApp(Center(
child: Text(
'第一個APP',
textDirection: TextDirection.ltr,
),
));
}
執行畫面
小技巧：格式化程式碼(Reformat Code)
格式化程式碼(Reformat Code)，程式碼快速整齊排版，可以至 Preferences 內，設定快捷鍵： Reformat Code。
Material 設計指南
Flutter 是由 Google 主導研發出來的開源跨平台軟體框架，所以畫面設計樣式風格，官方當然也建議採用 Material Design。
Material Design ，材質設計是由 Google 開發的設計語言 。定義畫面中的的布局方式、回應動畫與過渡、填充、深度效果（如光線和陰影）等。詳細可以參考 Material Design 官網介紹：https://material.io/design/
使用 Material 樣式主題
我們這次範例，要試著採用 Material 樣式主題，在畫面上方顯示頁面名稱，在畫面正中間，顯示文字「第一個APP」。初次看到 Flutter 程式結構可能會有點茫，可以搭配下方 Widget 階層關係圖，一起來看這一次的程式結構，會更容易了解。
程式最一開始進入 main 後，會執行 runApp ，裡面我們宣告使用了 MaterialApp。而裡面的 home 屬性你可以想像成是整個手機的畫面，我們透過 Scaffold 鷹架來將畫面切割成上、下兩個部分。上面 appBar 為畫面頭的部分可以用來顯示我們當前這個頁面的名稱，我們此頁定義顯示「第一個APP」。下面部分 body 為畫面身體的部分，我們加入 Center 置中容器，讓我們等一下加入的 Text 文字標籤可以顯示在畫面中央。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('第一個APP'),
),
body: Center(
child: Text('HKT線上教室'),
),
),
));
}
執行畫面
Widget 階層關係圖
這裡 KT 附上 Widget 階層關係圖，來輔助大家可以對 Flutter 程式結構能有進一步的認識。
Widget 階層關係圖(一)
參考資料：Flutter : From Zero To Comfortable
Widget 階層關係圖(二)
參考資料：Widget - State - Context - InheritedWidget
補充：Dart 基礎知識
若對上方程式碼寫法有點茫，還不熟悉 Dart 程式語言，可以參考：【從零開始學 Dart 程式設計】線上教學課程目錄 Flutter 先修班 ， Dart 程式語言基礎入門課程。
Dart 類別 - 構造方法
class DemoClass {
int intVal=0;
DemoClass() {
intVal = -1;
}
}
void main() {
//創建物件，使用無參數，構造方法
DemoClass d1 = new DemoClass();
print(d1.intVal);
}
Dart 方法 - 有參數的方法
void sample(String x) {
print(x);
}
void main() {
sample('HKT線上教室');
}
Dart 方法 - 可選命名參數方法
使用大括號{}，包覆參數名稱，呼叫此函數時，即可選擇命名參數呼叫使用
void setData({int x = 0, int y = 0}) {
print('x: $x , y: $y');
}
void main() {
setData(x: 100, y: 66);
setData(y: 66, x: 100);
setData(y: 66);
}
那今天就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉！！！掰掰～
參考資料
HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com
維基百科：Material Design
https://zh.wikipedia.org/wiki/质感设计
