[Flutter] 寫第一個 Flutter app，part1 要點
模擬器中除錯元素的佈局：
Android Studio 右側邊欄 Flutter Inspector，選擇 Toggle Debug Paint 開啟。
格式化程式碼：
編輯器中右鍵 Reformat Code with dartfmt。
使用外部功能包（https://pub.dartlang.org/flutter）：
把外部包名加到 pubspec.yaml 的 dependencies 依賴中，執行 flutter packages get 安裝，程式碼中 import 進來使用。
例子內容解讀（https://flutter.io/docs/get-started/codelab）：
StatelessWidget 子 Widget 實現 build 方法，Stateless widget 是不變的，意思是它們的屬性不能變 - 所有的值都是 final。
StatefulWidget 子 Widget 實現 createState 方法；Stateful widget 維護著 widget 生命週期內可能改變的狀態。
實現一個 stateful widget 需要至少兩個 class：
1）一個建立了 State 類例項的 StatefulWidget 類。
2）一個 State 類。
// 我們使用了一個 RandomWords 的 State 類，RandomWordsState 依賴 RandomWords 類。
class RandomWordsState extends State<RandomWords> {
// TODO 實現 build() 方法，返回 Scaffold
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
// 實現 Scaffold 裡使用的私有 widget 功能，比如構建 ListView，ListView 構造方法允許我們構建一個按需載入的 list
// ListView 提供一個 builder 屬性和 itemBuilder 方法，itemBuilder 是一個匿名函式形式的回撥方法，傳入 BuildContext 和 行索引號。
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: /*1*/ (context, i) {
if (i.isOdd) return Divider(); /*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);
});
}
/*1*/ itemBuilder回撥在生成每個單詞時呼叫一次，並替換 ListTile 行。偶數行為單詞新增 ListTile，奇數行新增 Divider widget 垂直分隔實體。
/*2*/ 在 ListView 每行之前新增一個一畫素高的 divider
/*3*/ 表示式 i ~/ 2，i 整除 2，返回整數的結果。如 1,2,3,4,5 變成 0,1,1,2,2。這計算 ListView 中真實的單詞數，減去 divider widget 數。
/*4*/ 如果到達了可用單詞的結尾，接著生成 10個到建議列表中。呼叫 _buildRow 展示每行的 title。
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
// 有狀態的類除了建立 State 類的例項，什麼都不做。
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => new RandomWordsState();
}
Flutter Api Doc（https://docs.flutter.io/flutter/index.html）：
ListTile 一個單獨的固定高度的行，一般包含有文字和前後圖示（https://docs.flutter.io/flutter/material/ListTile-class.html）。
第一行的 text 不是可選的，由 title 指定。
subtitle 是可選的，會分配附加一行文字的空間，或者當 isThreeLine 為 true 是兩行。
dense 為 true 時，title 總高 和 DefaultTextStyles 包裹的 title、subtitle 尺寸會縮小。
ListTile 總是固定的高度（取決於 isThreeLine、dense、subtitle 是如何配置的）；根據它們的內容無法增加高度。
如果你在尋找可以在一行內任意佈局的 widget，考慮使用 Row.
ListTile 一般在 ListViews 中使用，或者 Drawer 和 Card 的 Column 中。
需要它的一個祖先是 Material widget。
ListTileTheme，給 ListTiles 定義了視覺屬性。
ListView，可以在一個滾動列表中展示任意數量的 ListTile。
CircleAvatar，代表一個人的 icon，通常作為 ListTile 的 leading 元素來使用。
Card，展示少量的帶有 Column 的 ListTiles。
Divider，
ListTile.divideTitles，
CheckboxListTile，RadioListTile，SwitchListTile
Divider 兩邊帶有 padding的一個裝置畫素厚水平線（https://docs.flutter.io/flutter/material/Divider-class.html）。
Divider 可以用在 list、Drawer 和其它需要水平/垂直分隔內容的地方。
在一個列表的 item 中使用一畫素 divider，考慮使用 ListTile.divideTiles，是針對這種情況優化的例子。
盒子高度由 Divider.height 控制，合適的 padding 會在寬高中自動計算。
PopupMenuDivider，等同 Divider，但是針對彈出選單。
ListTile.divideTiles，另一種 list 中的 divide widget 的途徑。