02. 用IDEA快速建立第一支Flutter程式

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程式

• 目標：在手機螢幕上顯示文字。
• 作法：
  1. 用runApp()載入傳入的Widget當做根Widget
  2. 用Text()顯示文字在App裡；textDirection就是具名參數
  3. Flutter裡建立物件的new可省略

void main() {
  runApp(Text("Hello, world. 哈囉，世界!!!", textDirection: TextDirection.ltr));
}

在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),
  )));
}

加上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),
              )
          )
      )
  );
}

不是很美觀… 因為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),
                )
            ),
          )
      )
  );
}

實際操作影片

＃＃

您可能也會有興趣的類似文章

• 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)