DevTools

隨著 Flutter 應用程式的複雜度增加，理解每個元件屬性如何影響 UI 變得更加重要。 Dart 與 Flutter DevTools 提供了兩個特別實用的功能： 元件檢查器 與 屬性編輯器。

首先，在應用程式以除錯模式執行的情況下，透過以下指令啟動 DevTools。 請在與應用程式執行不同的終端機視窗中執行此指令：

$ dart devtools

執行此指令會啟動 DevTools 伺服器，並在瀏覽器中開啟介面。

若要將 DevTools 連接至正在執行的應用程式：

1. 在應用程式執行的終端機中找到印出的 DevTools URL（例如： Serving DevTools at http://127.0.0.1:9101）。
2. 複製此 URL。
3. 將其貼入 DevTools 瀏覽器頁面的連接列中。

元件檢查器讓你能夠視覺化並探索元件樹。 它幫助你理解 UI 的版面配置，並找出負責畫面各個部分的元件。 針對你目前建置的應用程式執行後，檢查器的外觀如下：

以你在本節中建立的 GamePage 元件為例：

class GamePage extends StatelessWidget {
  GamePage({super.key});
​
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          for (var guess in _game.guesses)
            Row(
              spacing: 5.0,
              children: [
                for (var letter in guess) Tile(letter.char, letter.type)
              ]
            ),
        ],
      ),
    );
  }
}

以及它在 MainApp 中的使用方式：

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

在元件檢查器中，你應該會看到與程式碼中完全相同的元件樹： 以 MaterialApp 為根節點，Scaffold 作為其 home， AppBar 作為其 appBar，以此類推，一路延伸至含有 Tile 子元件的 Row 元件。 你可以在樹中選擇任何元件，查看其屬性， 甚至直接跳至 IDE 中對應的原始碼。

元件檢查器在除錯版面配置問題時或許最為實用。

在某些情況下，元件的約束條件（constraints）是無界的（unbounded），也就是無限大。 這表示最大寬度或最大高度被設定為 double.infinity。 若一個元件嘗試盡可能地擴展，在受到無界約束時將無法正常運作，並且在除錯模式下會拋出例外。

渲染盒（render box）出現無界約束最常見的情況，是在彈性盒元件（Row 或 Column）內部， 以及在可捲動區域內（例如 ListView 或 ScrollView 的子類別）。

例如，ListView 會嘗試在交叉軸方向上擴展以填滿可用空間， 例如垂直捲動的區塊嘗試與父元件等寬。 如果你將垂直捲動的 ListView 嵌套在水平捲動的 ListView 內， 內層清單會嘗試盡可能地寬，而由於外層在該方向上是可捲動的， 因此寬度將會是無限大。

建置 Flutter 應用程式時最常遇到的錯誤， 可能就是錯誤使用版面配置元件所導致的。 這個錯誤被稱為「無界約束（unbounded constraints）」錯誤。

觀看以下影片，了解如何識別並解決此問題。

Watch on YouTube in a new tab: "Decoding Flutter: Unbounded height and width"

在元件檢查器中選取元件後，屬性編輯器會顯示該元件的所有屬性。 這是一個強大的工具，可以幫助你理解元件呈現特定外觀的原因， 並能即時試驗屬性值的變更。

回顧稍早 Tile 元件的 build 方法：

class Tile extends StatelessWidget {
  const Tile(this.letter, this.hitType, {super.key});
​
  final String letter;
  final HitType hitType;
​
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        color: switch (hitType) {
          HitType.hit => Colors.green,
          HitType.partial => Colors.yellow,
          HitType.miss => Colors.grey,
          _ => Colors.white,
        },
      ),
    );
  }
}

如果在元件檢查器中選取 Tile 內的 Container 元件， 屬性編輯器會顯示其 width（60）、height（60）以及 decoration 屬性。 接著你可以展開 BoxDecoration，查看 border 和 color 屬性。

對於許多屬性，你甚至可以直接在屬性編輯器中修改其值。 例如，若要快速測試 Tile 元件中 Container 的不同 width 或 height 效果， 只需在屬性編輯器中更改數值即可。 此工具會將更新直接寫回磁碟上的 .dart 原始檔， 讓你在儲存或觸發熱重載（hot reload）後， 能夠立即在執行中的應用程式上看到視覺效果。 這使得 UI 設計的迭代速度大幅提升。