建立應用程式

在這個 Flutter 教學的第一節中， 你將建置一個名為「Birdle」的應用程式核心 UI， 這是一個類似於 Wordle，紐約時報熱門遊戲 的遊戲。

在本教學結束時，你將學會建置 Flutter UI 的基本知識， 並且你的應用程式將看起來像下面的螢幕截圖（而且它甚至大部分都能運作 😀）。

建置 Flutter 應用程式的第一步是建立新專案。 你可以使用 Flutter CLI 工具建立新的應用程式， 它是 Flutter SDK 的一部分。

開啟你的終端機或命令提示字元，執行以下指令來建立新的 Flutter 專案：

$ flutter create birdle --empty

這會使用最精簡的「empty」範本建立一個新的 Flutter 專案。

在你的 IDE 中，開啟 lib/main.dart 檔案。 從頂部開始，你會看到這段程式碼。

void main() {
  runApp(const MainApp());
}

main 函式是任何 Dart 程式的進入點， 而 Flutter 應用程式本質上就是一個 Dart 程式。 runApp 方法是 Flutter SDK 的一部分， 它接受一個元件作為引數。 在此範例中，傳入的是 MainApp 元件的實例。

在 main 函式的正下方，你會找到 MainApp 類別的宣告。

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

MainApp 是根元件 (root widget)， 因為它是傳入 runApp 的元件。 在這個元件內部，有一個 build 方法， 它會回傳另一個名為 MaterialApp 的元件。 本質上，這就是 Flutter 應用程式的結構： 由元件組合 (composition) 而成的樹狀結構，稱為元件樹 (widget tree)。

作為 Flutter 開發者，你的工作是 將 SDK 中的元件組合成更大的自訂元件，以顯示 UI。

目前，元件樹相當簡單：

1. 在你的終端機中， 切換到你所建立的 Flutter 應用程式根目錄：

   $ cd birdle
   

   content_copy

2. 使用 Flutter CLI 工具執行應用程式。

   $ flutter run -d chrome
   

   content_copy

   應用程式將會建置並在新的 Chrome 視窗中啟動。

有狀態熱重載 (Stateful hot reload)（如果你之前沒聽過）， 能讓正在執行中的 Flutter 應用程式在不到一秒內重新渲染更新後的商業邏輯或 UI 程式碼， 而且不會失去你在應用程式中的操作進度。

在你的 IDE 中，開啟 main.dart 檔案， 導覽至第 15 行附近，找到這段程式碼：

child: Text('Hello World!'),

將字串內的文字更改為任何你想要的內容。 然後，在應用程式正在執行的終端機中按下 r 鍵來熱重載你的應用程式。 正在執行的應用程式應該會立即顯示你更新後的文字。