1. 什么是 Flutter

Flutter 是一個由 Google 開發的開源移動應用程序開發框架，它可以讓您快速開發高品質、高性能、美觀的移動應用程序。Flutter 通過使用自己的控件庫和渲染引擎，可以輕鬆實現自定義的設計和動畫效果，並且可以在 iOS 和 Android 平臺上運行。

Flutter 使用 Dart 編程語言，這是一個由 Google 開發的高效且易於學習的語言。Dart 具有許多現代編程語言的特性，如強類型、支持異步編程、支持泛型、支持 mixin 等，可以幫助開發者更快地開發出高質量的代碼。

Flutter 還提供了豐富的工具和插件，如編輯器插件、測試工具、調試工具等，可以幫助開發者更快地開發和測試應用程序。

總的來說，Flutter 是一個非常適合開發高品質、高性能、美觀的移動應用程序的框架，它具有豐富的功能和工具，可以幫助開發者更快地開發出高質量的代碼。

2. 環境的搭建

Flutter 可以支持多種平台，而不同平台的 SDK 設置也會有所不同的，不過 Flutter 的官方文檔做得非常好，只需到官方網站（https://flutter.dev/docs/get-started/install），根據你自己使用的平台去下載安裝相應的SDK即可，在此我就不多做説明了，如果有什麼問題可在下面留言！

安裝好 SDK 後，就要選擇使用哪一個 IDE 進行開發了。我這裏就強烈推薦使用 Visual Studio Code，配合其強大的擴展和各種漂亮的主題，感覺這是開發 Flutter 最適合的 IDE 了，沒有之一 :satisfied:

3. 建立專案

a) 打開 VS Code，建立一個空的資料夾，或者將建立好的空資料夾拖進去
b) 在 VS Code 裏打開終端機，然後執行以下指令

flutter create hello_world

這樣就可以建立一個 flutter 專案，由於 flutter 是可以支援多種平台的，因此可在此專案裏看到有不同平台名字的資料夾，分別存放著相應平台版本的程式碼，而其中需要我們留意並會使用到的就是 lib 資料夾和 pubspec.yaml 檔案：

• lib: 是 Flutter 應用程式的主要代碼目錄，它包含了所有的 Dart 代碼。我們可以在 lib 資料夾中定義主要入口文件、頁面和組件、工具類和服務以及資源文件等，來組織我們的代碼。

• pubspec.yaml: 是 Flutter 應用程式的一個重要組成部分，它定義了應用程式所依賴的所有庫、資源和配置。我們可以通過編輯 pubspec.yaml 文件來管理應用程式的依賴項和其他配置。

4. 代碼解說

當建立好專案後，就可在 lib 下發現一個 main.dart 啟動文檔，現在就讓我們一步步來看看在這裏具體做了些什麼吧：

1) 引入 material.dart

首先看到的是一行引入 Flutter 的 Material Design 控制元件庫的代碼，這讓我們可以在應用程式中使用 Material Design 的控制元件。Material Design 是一種由 Google 開發的現代設計風格，它提供了一種統一的設計語言，可以讓我們的應用程式看起來更加現代、美觀和易於使用。

import 'package:flutter/material.dart';

2) main 入口

這是應用程式的入口點，它包含了一個名為 main 的函式，用於運行整個應用程式：

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

void 表示這個函式沒有返回值。
main 是這個函式的名字，它是整個應用程式的入口點。
runApp 是 Flutter 應用程式的方法，它接收一個 Widget 作為參數並運行整個應用程式。

3) 實現 MyApp

接下來就是實現 MyApp 類，其需要繼承自 StatelessWidget ，表示這個 Widget 是一個無狀態的 Widget，它的構建只依賴於它的輸入，不會發生內部狀態的改變。其中 const MyApp({super.key});是一個建構函式,它接收一個可選的 key 參數，這個 key 參數可以用於識別這個 Widget。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Hello World!'),
    );
  }
}

在上述代碼中，Widget build(BuildContext context) 是 StatelessWidget 的一個必須實現的方法，它定義了 Widget 的外觀和行為。在這個方法中，我們建立了一個 MaterialApp Widget，它是一個頂級的 Widget，包含了整個應用程式的主題、標題和首頁。

同時在這個 MaterialApp Widget 中，定義了以下屬性：

title：應用程式的標題，顯示在應用程式的標題欄上。
theme：應用程式的主題，包含了應用程式的顏色和樣式。
colorScheme：應用程式的色彩方案，可以用於設置應用程式中不同部分的顏色。
useMaterial3：指定是否使用 Material Design 3.0

最後，還定義了一個名為 MyHomePage 的 Widget，作為 MaterialApp 的首頁。這個 Widget 顯示了應用程式的標題和一個歡迎信息。

4) 實現 MyHomePage

接下來就是實現 MyHomePage，因為之後需要在裏面產生一個計數器，這就涉及了數據的變動和界面的更新問題，因此需要繼承自 StatefulWidget 並且要實現其 createState() 方法

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

其中 State <MyHomePage> createState() 是 StatefulWidget 的一個必須實現的方法，它返回一個繼承自 State<MyHomePage> 的狀態對象，用於管理這個 Widget 的內部狀態。

5) 實現 _MyHomePageState

接著，定義了一個名為 _MyHomePageState 的類，這個類繼承自 State<MyHomePage>，用於管理 MyHomePage Widget 的內部狀態。在這個類中，我們實現了 build 方法，使用了 Scaffold Widget，它提供了一個基本的 Material Design 布局

class _MyWidgetState extends State<MyWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
    );
  }
}

6）實現 Scaffold

我們詳細來看看這個 Scaffold 是如何實現的

return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );

在 Scaffold Widget 中，定義了以下屬性：

appBar：顯示在應用程式頂部的 AppBar。我們使用了 AppBar Widget，並設置了 AppBar 的背景色和標題文字。

body：主要內容，顯示在 AppBar 下方。在這裡，使用了 Center Widget，將其子 Widget 居中顯示。子 Widget 是一個 Column Widget，包含了兩個 Text Widget，分別顯示了一個固定的提示字串和一個數字變量。

floatingActionButton：操作按鈕，顯示在主要內容的右下角。這是一個操作按鈕，按下去的時候就會呼叫一個囘調函式 _incrementCounter

7) 囘調函式

最後要實現按鈕點擊的囘調函式

void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

這裏用到了 setState 方法，setState 是一個非常重要的方法，它用於通知 Flutter 應用程式畫面發生了改變，需要重新構建 Widget。

當我們使用 setState 方法時，我們需要傳遞一個回調函數，用於更新 Widget 的狀態。在這個回調函數中，我們可以修改 Widget 的內部狀態，例如修改一個變量的值、修改一個列表的內容等。在回調函數執行完畢後，Flutter 會檢查 Widget 的狀態是否發生了改變，如果發生了改變，它就會重新構建 Widget，並更新畫面。

使用 setState 方法的好處是，它可以讓我們在修改 Widget 的內部狀態時，自動觸發畫面的更新，而不需要手動調用 build 方法。這樣可以大大簡化我們的開發工作，提高開發效率。

在此例中，就是將計數器加 1 ，當然在上面我們還需要定義好一個計數器的變量。

5. 測試

現在所有代碼完成了，最後就是看效果的時候了，還是要回到終端機上，執行以下指令就可啟動 APP 然後在模擬器裏測試效果了

flutter run

然後在模擬器裏就可看到以下畫面

flutter tutorial

〈強大好用的 Flutter 移動開發框架 －－初級教學〉這篇文章最早發佈於《代碼部落》。