具有顏色最佳化的 Container

在框架中新增了一個 ColoredBox 元件 (Widget)， 並且對 Container 元件進行了最佳化， 當使用者指定 color 而非 decoration 時會使用該元件。

在實務上，經常會如下使用 Container 元件：

return Container(color: Colors.red);

過去，這段程式碼會產生一個元件階層，實際上是使用 BoxDecoration 來繪製背景顏色。 BoxDecoration 元件除了繪製背景顏色之外，還涵蓋了許多其他情境， 因此在僅需繪製背景顏色時，效率不如新的 ColoredBox 元件， ColoredBox 元件只負責繪製背景顏色。

在元件測試（Widget tests）中，若要根據元件樹中某個容器的顏色進行斷言， 過去必須找到 BoxDecoration，才能實際取得該容器的顏色。 現在，除非有明確指定 BoxDecoration 作為 decoration 屬性，否則可以直接檢查 Container 本身的 color 屬性。 若同時提供 color 和 decoration 給 Container，仍然會發生錯誤。

針對 Container 的顏色進行斷言，或預期其會建立 BoxDecoration 的測試程式碼，需要進行修改。

遷移前的程式碼：

testWidgets('Container color', (WidgetTester tester) async {
  await tester.pumpWidget(Container(color: Colors.red));
​
  final Container container = tester.widgetList<Container>().first;
  expect(container.decoration.color, Colors.red);
  // Or, a test may have specifically looked for the BoxDecoration, e.g.:
  expect(find.byType(BoxDecoration), findsOneWidget);
});

遷移後的程式碼：

testWidgets('Container color', (WidgetTester tester) async {
  await tester.pumpWidget(Container(color: Colors.red));
​
  final Container container = tester.widgetList<Container>().first;
  expect(container.color, Colors.red);
  // If your test needed to work directly with the BoxDecoration, it should
  // instead look for the ColoredBox, e.g.:
  expect(find.byType(BoxDecoration), findsNothing);
  expect(find.byType(ColoredBox), findsOneWidget);
});

導入版本：1.15.4
穩定版本：1.17

API 文件：

• Container
• ColoredBox
• BoxDecoration

相關議題：

• Issue 9672
• Issue 28753

相關 PR：

• Colored box and container optimization #50979