![]()
Widget與「微件」？
Flutter使用Dart語言來開發，Dart語言最重要的概念是：一切都是物件（Everything is
Object）；而Flutter的最重要概念則是：一切都是Widget（Everything is Widget）。
「Widget」通常譯為組件或部件，做為UI組成的最基本單位。而在剛剛落幕的2019年Google Developer Days上海站則出現了「微件」一詞，微件與Widget的發音類似，也能表達做為組成Flutter UI所有內容的含意，算是不錯的翻譯:smile:。
▼ Google的Flutter工程師雙人相聲影片：《Flutter如何渲染微件》；2019/9/10 Google Developer Days上海站
Dart語言的具名參數
在開始撰寫Flutter的App之前，必須先了熟悉Dart的具名參數（Named Parameters）。
通常在調用函數（或在類別裡稱為方法）時是以順序來傳參數，如下例100傳給n1，200傳給n2：
int add(int n1, int n2) {
print("add parameter n1=" + n1.toString() + ", n2=" + n2.toString());
return n1 + n2;
}
void main() {
int total = add(100,200);
print("total is " + total.toString());
}
但只要我們在add函數的引數列開頭與結尾加上大括號，便形成具名參數，在調用時必須指定參數名稱：
int function add({int n1, int n2}) {
print("add parameter n1=" + n1.toString() + ", n2=" + n2.toString());
return n1 + n2;
}
void main() {
int total = add(n2: 200, n1: 100);
print("total is " + total.toSting());
}
因為「一切都是物件」，因此print要顯示數值就要用.toString()這樣的方法：
print("Number Sample: " + 123.toString());
print("Boolean Sample: " + true.toString());
最簡單的Flutter程式
- 目標：在手機螢幕上顯示文字。
- 作法：
- 用runApp()載入傳入的Widget當做根Widget
- 用Text()顯示文字在App裡；textDirection就是具名參數
- Flutter裡建立物件的new可省略
void main() {
runApp(Text("Hello, world. 哈囉，世界!!!", textDirection: TextDirection.ltr));
}
![simple1]()
在IntelliJ IDEA或Android Studio裡操作的重點：
1. 在runApp上按〔Ctrl+Q〕顯示快速說明（Quick documentation）
2. 在runApp(參數裡按〔Ctrl+P〕顯示參數說明（Parameter Information）
3. 在Text上按〔Alt+Enter〕顯示可使用的動作（Context Actions）
置中文字並加上樣式
使用〔Alt+Enter〕再選用【Center widget】以插入Center Widget，再於Text加上第三個參數 style 即能變更顯示外觀：
void main() {
runApp(Center(
child: Text(
"Hello, world. 哈囉，世界!!!",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 30),
)));
}
![simple2]()
加上MaterialApp使用Material UI主題
將程式修改為使用MaterialApp Widget：
void main() {
runApp(
MaterialApp(
title: "第一支Flutter App",
home: Center(
child: Text(
"Hello, world. 哈囉，世界!!!",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 30),
)
)
)
);
}
![MaterialApp1]()
不是很美觀… 因為MaterialApp要再調用Scaffold（鷹架）才能組織出MaterialApp的外觀，如下我們就能建立一個簡單、完整的App了：
void main() {
runApp(
MaterialApp(
title: "第一支Flutter App",
home: Scaffold(
appBar: AppBar(title: Text("第一支Flutter App")),
body: Center(
child: Text(
"Hello, world. 哈囉，世界!!!",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 30),
)
),
)
)
);
}
![materialApp2]()
實際操作影片
＃＃
您可能也會有興趣的類似文章
- IntelliJ IDEA與括號相關的操作並介紹括號識別外掛：Rainbow Brackets (0則留言, 2019/09/22)
- 03. 更多的Flutter範例：StatelessWidget、StatefulWidgett與其他Widgets (0則留言, 2019/09/21)
- 01. 使用IntelliJ IDEA開發Flutter App：開發環境設置 (0則留言, 2019/09/15)
- 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
- Java的資料型態與簡單的計算機程式 (IDEA #8) (0則留言, 2019/08/25)
- 用IntelliJ IDEA寫第一支Java程式；程式結構說明；Live Tempate用法（IDEA #4） (0則留言, 2019/08/09)
- 用IntelliJ IDEA的GUI Designer開發Swing程式 (0則留言, 2014/02/14)
- [IntelliJ IDEA] 檔案樣板的使用技巧 (0則留言, 2017/11/26)
- 方便的IntelliJ IDEA外掛：Terminal (0則留言, 2015/01/27)
- IntelliJ IDEA的啟動設定與建議安裝的外掛（IDEA #3） (0則留言, 2019/07/21)
- [IntelliJ IDEA] Java / JavaScript除錯小技巧 (0則留言, 2014/08/14)
- IntelliJ IDEA Live Template(即時樣板)的使用與範例說明（IDEA #5） (0則留言, 2019/08/11)
- 方便的IntelliJ IDEA Markdown外掛idea-multimarkdown (0則留言, 2015/11/14)
- 使用JUnit5測試程式的操作步驟 (IDEA教學 #10) (0則留言, 2019/08/31)
- [IntelliJ IDEA 2017.2] Database tool功能簡介 (0則留言, 2017/07/29)
![]()
簡報瀏覽：
安裝步驟說明影片：
IntelliJ IDEA
=> x 意為 {return x;}
