Factor out deprecated names in example code (#151374)

This PR contains: - 3 instances of `colorScheme.background` â `colorScheme.surface` - and a whole bunch of `MaterialState` â `WidgetState` As of yet, no changes have been made to example test files or the [examples/api/lib/material/material_state/](0b2a8e589e/examples/api/lib/material/material_state) directory. (related: #151373)
2024-07-08 13:06:54 -06:00
parent 0a4f1a7e55
commit b713445298
22 changed files with 80 additions and 80 deletions
--- a/examples/api/lib/material/checkbox/checkbox.0.dart
+++ b/examples/api/lib/material/checkbox/checkbox.0.dart
@@ -36,11 +36,11 @@ class _CheckboxExampleState extends State<CheckboxExample> {

  @override
  Widget build(BuildContext context) {
-    Color getColor(Set<MaterialState> states) {
-      const Set<MaterialState> interactiveStates = <MaterialState>{
-        MaterialState.pressed,
-        MaterialState.hovered,
-        MaterialState.focused,
+    Color getColor(Set<WidgetState> states) {
+      const Set<WidgetState> interactiveStates = <WidgetState>{
+        WidgetState.pressed,
+        WidgetState.hovered,
+        WidgetState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
@@ -50,7 +50,7 @@ class _CheckboxExampleState extends State<CheckboxExample> {

    return Checkbox(
      checkColor: Colors.white,
-      fillColor: MaterialStateProperty.resolveWith(getColor),
+      fillColor: WidgetStateProperty.resolveWith(getColor),
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
--- a/examples/api/lib/material/data_table/data_table.1.dart
+++ b/examples/api/lib/material/data_table/data_table.1.dart
@@ -45,9 +45,9 @@ class _DataTableExampleState extends State<DataTableExample> {
        rows: List<DataRow>.generate(
          numItems,
          (int index) => DataRow(
-            color: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
+            color: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
              // All rows will have the same selected color.
-              if (states.contains(MaterialState.selected)) {
+              if (states.contains(WidgetState.selected)) {
                return Theme.of(context).colorScheme.primary.withOpacity(0.08);
              }
              // Even rows will have a grey color.
--- a/examples/api/lib/material/date_picker/date_picker_theme_day_shape.0.dart
+++ b/examples/api/lib/material/date_picker/date_picker_theme_day_shape.0.dart
@@ -16,10 +16,10 @@ class DatePickerApp extends StatelessWidget {
    return MaterialApp(
      theme: ThemeData(
        datePickerTheme: DatePickerThemeData(
-          todayBackgroundColor: const MaterialStatePropertyAll<Color>(Colors.amber),
-          todayForegroundColor: const MaterialStatePropertyAll<Color>(Colors.black),
+          todayBackgroundColor: const WidgetStatePropertyAll<Color>(Colors.amber),
+          todayForegroundColor: const WidgetStatePropertyAll<Color>(Colors.black),
          todayBorder: const BorderSide(width: 2),
-          dayShape: MaterialStatePropertyAll<OutlinedBorder>(
+          dayShape: WidgetStatePropertyAll<OutlinedBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
--- a/examples/api/lib/material/input_decorator/input_decoration.floating_label_style_error.0.dart
+++ b/examples/api/lib/material/input_decorator/input_decoration.floating_label_style_error.0.dart
@@ -34,13 +34,13 @@ class InputDecoratorExample extends StatelessWidget {
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        labelText: 'Name',
-        // The MaterialStateProperty's value is a text style that is orange
+        // The WidgetStateProperty's value is a text style that is orange
        // by default, but the theme's error color if the input decorator
        // is in its error state.
-        floatingLabelStyle: MaterialStateTextStyle.resolveWith(
-          (Set<MaterialState> states) {
+        floatingLabelStyle: WidgetStateTextStyle.resolveWith(
+          (Set<WidgetState> states) {
            final Color color =
-                states.contains(MaterialState.error) ? Theme.of(context).colorScheme.error : Colors.orange;
+                states.contains(WidgetState.error) ? Theme.of(context).colorScheme.error : Colors.orange;
            return TextStyle(color: color, letterSpacing: 1.3);
          },
        ),
--- a/examples/api/lib/material/input_decorator/input_decoration.label_style_error.0.dart
+++ b/examples/api/lib/material/input_decorator/input_decoration.label_style_error.0.dart
@@ -34,13 +34,13 @@ class InputDecoratorExample extends StatelessWidget {
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        labelText: 'Name',
-        // The MaterialStateProperty's value is a text style that is orange
+        // The WidgetStateProperty's value is a text style that is orange
        // by default, but the theme's error color if the input decorator
        // is in its error state.
-        labelStyle: MaterialStateTextStyle.resolveWith(
-          (Set<MaterialState> states) {
+        labelStyle: WidgetStateTextStyle.resolveWith(
+          (Set<WidgetState> states) {
            final Color color =
-                states.contains(MaterialState.error) ? Theme.of(context).colorScheme.error : Colors.orange;
+                states.contains(WidgetState.error) ? Theme.of(context).colorScheme.error : Colors.orange;
            return TextStyle(color: color, letterSpacing: 1.3);
          },
        ),
--- a/examples/api/lib/material/list_tile/list_tile.3.dart
+++ b/examples/api/lib/material/list_tile/list_tile.3.dart
@@ -47,22 +47,22 @@ class _ListTileExampleState extends State<ListTileExample> {
          },
          // This sets text color and icon color to red when list tile is disabled and
          // green when list tile is selected, otherwise sets it to black.
-          iconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
-            if (states.contains(MaterialState.disabled)) {
+          iconColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
+            if (states.contains(WidgetState.disabled)) {
              return Colors.red;
            }
-            if (states.contains(MaterialState.selected)) {
+            if (states.contains(WidgetState.selected)) {
              return Colors.green;
            }
            return Colors.black;
          }),
          // This sets text color and icon color to red when list tile is disabled and
          // green when list tile is selected, otherwise sets it to black.
-          textColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
-            if (states.contains(MaterialState.disabled)) {
+          textColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
+            if (states.contains(WidgetState.disabled)) {
              return Colors.red;
            }
-            if (states.contains(MaterialState.selected)) {
+            if (states.contains(WidgetState.selected)) {
              return Colors.green;
            }
            return Colors.black;
--- a/examples/api/lib/material/navigation_bar/navigation_bar.2.dart
+++ b/examples/api/lib/material/navigation_bar/navigation_bar.2.dart
@@ -279,7 +279,7 @@ class ListPage extends StatelessWidget {
              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
              child: OutlinedButton(
                style: buttonStyle.copyWith(
-                  backgroundColor: MaterialStatePropertyAll<Color>(
+                  backgroundColor: WidgetStatePropertyAll<Color>(
                    Color.lerp(
                      destination.color[100],
                      Colors.white,
--- a/examples/api/lib/material/search_anchor/search_bar.0.dart
+++ b/examples/api/lib/material/search_anchor/search_bar.0.dart
@@ -32,7 +32,7 @@ class _SearchBarAppState extends State<SearchBarApp> {
            builder: (BuildContext context, SearchController controller) {
              return SearchBar(
                controller: controller,
-                padding: const MaterialStatePropertyAll<EdgeInsets>(EdgeInsets.symmetric(horizontal: 16.0)),
+                padding: const WidgetStatePropertyAll<EdgeInsets>(EdgeInsets.symmetric(horizontal: 16.0)),
                onTap: () { controller.openView(); },
                onChanged: (_) { controller.openView(); },
                leading: const Icon(Icons.search),
--- a/examples/api/lib/material/switch/switch.1.dart
+++ b/examples/api/lib/material/switch/switch.1.dart
@@ -37,10 +37,10 @@ class _SwitchExampleState extends State<SwitchExample> {

  @override
  Widget build(BuildContext context) {
-    final MaterialStateProperty<Color?> trackColor = MaterialStateProperty.resolveWith<Color?>(
-      (Set<MaterialState> states) {
+    final WidgetStateProperty<Color?> trackColor = WidgetStateProperty.resolveWith<Color?>(
+      (Set<WidgetState> states) {
        // Track color when the switch is selected.
-        if (states.contains(MaterialState.selected)) {
+        if (states.contains(WidgetState.selected)) {
          return Colors.amber;
        }
        // Otherwise return null to set default track color
@@ -49,14 +49,14 @@ class _SwitchExampleState extends State<SwitchExample> {
        return null;
      },
    );
-    final MaterialStateProperty<Color?> overlayColor = MaterialStateProperty.resolveWith<Color?>(
-      (Set<MaterialState> states) {
+    final WidgetStateProperty<Color?> overlayColor = WidgetStateProperty.resolveWith<Color?>(
+      (Set<WidgetState> states) {
        // Material color when switch is selected.
-        if (states.contains(MaterialState.selected)) {
+        if (states.contains(WidgetState.selected)) {
          return Colors.amber.withOpacity(0.54);
        }
        // Material color when switch is disabled.
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
          return Colors.grey.shade400;
        }
        // Otherwise return null to set default material color
@@ -71,7 +71,7 @@ class _SwitchExampleState extends State<SwitchExample> {
      value: light,
      overlayColor: overlayColor,
      trackColor: trackColor,
-      thumbColor: const MaterialStatePropertyAll<Color>(Colors.black),
+      thumbColor: const WidgetStatePropertyAll<Color>(Colors.black),
      onChanged: (bool value) {
        // This is called when the user toggles the switch.
        setState(() {
--- a/examples/api/lib/material/switch/switch.2.dart
+++ b/examples/api/lib/material/switch/switch.2.dart
@@ -36,9 +36,9 @@ class _SwitchExampleState extends State<SwitchExample> {
  bool light0 = true;
  bool light1 = true;

-  final MaterialStateProperty<Icon?> thumbIcon = MaterialStateProperty.resolveWith<Icon?>(
-    (Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  final WidgetStateProperty<Icon?> thumbIcon = WidgetStateProperty.resolveWith<Icon?>(
+    (Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
        return const Icon(Icons.check);
      }
      return const Icon(Icons.close);
--- a/examples/api/lib/material/switch/switch.4.dart
+++ b/examples/api/lib/material/switch/switch.4.dart
@@ -121,13 +121,13 @@ class _SwitchThemeAdaptation extends Adaptation<SwitchThemeData> {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return SwitchThemeData(
-          thumbColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
-            if (states.contains(MaterialState.selected)) {
+          thumbColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+            if (states.contains(WidgetState.selected)) {
              return Colors.yellow;
            }
            return null; // Use the default.
          }),
-          trackColor: const MaterialStatePropertyAll<Color>(Colors.brown),
+          trackColor: const WidgetStatePropertyAll<Color>(Colors.brown),
        );
    }
  }
--- a/examples/api/lib/material/text_button/text_button.0.dart
+++ b/examples/api/lib/material/text_button/text_button.0.dart
@@ -104,15 +104,15 @@ class _TextButtonExampleState extends State<TextButtonExample> {
    // This gradient's appearance reflects the button's state.
    // Always return a gradient decoration so that AnimatedContainer
    // can interpolate in between. Used by TextButton #7.
-    Decoration? statesToDecoration(Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
+    Decoration? statesToDecoration(Set<WidgetState> states) {
+      if (states.contains(WidgetState.pressed)) {
        return BoxDecoration(
          gradient: LinearGradient(colors: <Color>[color2, color2]), // solid fill
        );
      }
      return BoxDecoration(
        gradient: LinearGradient(
-          colors: switch (states.contains(MaterialState.hovered)) {
+          colors: switch (states.contains(WidgetState.hovered)) {
            true => <Color>[color1, color2],
            false => <Color>[color2, color1],
          },
@@ -149,7 +149,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
      // In this example, and most of the ones that follow, we're using
      // the TextButton.styleFrom() convenience method to create a ButtonStyle.
      // The styleFrom method is a little easier because it creates
-      // ButtonStyle MaterialStateProperty parameters for you.
+      // ButtonStyle WidgetStateProperty parameters for you.
      // In this case, Specifying foregroundColor overrides the text,
      // icon and overlay (splash and highlight) colors a little differently
      // depending on the button's state. BackgroundColor is just the background
@@ -213,7 +213,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
      // theme or the MaterialApp theme's ThemeData.textButtonTheme.
      TextButton(
        style: TextButton.styleFrom(
-          foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
+          foregroundBuilder: (BuildContext context, Set<WidgetState> states, Widget? child) {
            return ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
@@ -248,10 +248,10 @@ class _TextButtonExampleState extends State<TextButtonExample> {
      // outlines the button's shape.
      TextButton(
        style: TextButton.styleFrom(
-          foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
+          foregroundBuilder: (BuildContext context, Set<WidgetState> states, Widget? child) {
            return DecoratedBox(
              decoration: BoxDecoration(
-                border: states.contains(MaterialState.hovered)
+                border: states.contains(WidgetState.hovered)
                  ? Border(bottom: BorderSide(color: colorScheme.primary))
                  : const Border(), // essentially "no border"
              ),
@@ -272,7 +272,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
      // closely). Because we want the outline to only appear when the button is hovered
      // we can't use the styleFrom() side parameter, because that creates the same
      // outline for all states. The ButtonStyle.copyWith() method is used to add
-      // a MaterialState<BorderSide?> property that does the right thing.
+      // a WidgetState<BorderSide?> property that does the right thing.
      //
      // The gradient background is translucent - all of the colors have opacity 0.5 -
      // so the overlay's splash and highlight colors are visible even though they're
@@ -284,7 +284,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
        onPressed: () {},
        style: TextButton.styleFrom(
          overlayColor: color2,
-          backgroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
+          backgroundBuilder: (BuildContext context, Set<WidgetState> states, Widget? child) {
            return AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              decoration: statesToDecoration(states),
@@ -292,8 +292,8 @@ class _TextButtonExampleState extends State<TextButtonExample> {
            );
          },
        ).copyWith(
-          side: MaterialStateProperty.resolveWith<BorderSide?>((Set<MaterialState> states) {
-            if (states.contains(MaterialState.hovered)) {
+          side: WidgetStateProperty.resolveWith<BorderSide?>((Set<WidgetState> states) {
+            if (states.contains(WidgetState.hovered)) {
              return BorderSide(width: 3, color: color3);
            }
            return null; // defer to the default
@@ -315,7 +315,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
        onPressed: () {},
        style: TextButton.styleFrom(
          foregroundColor: Colors.white,
-          backgroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
+          backgroundBuilder: (BuildContext context, Set<WidgetState> states, Widget? child) {
            return Ink(
              decoration: const BoxDecoration(
                image: DecorationImage(
--- a/examples/api/lib/material/text_button/text_button.1.dart
+++ b/examples/api/lib/material/text_button/text_button.1.dart
@@ -29,19 +29,19 @@ class SelectableButton extends StatefulWidget {
 }

 class _SelectableButtonState extends State<SelectableButton> {
-  late final MaterialStatesController statesController;
+  late final WidgetStatesController statesController;

  @override
  void initState() {
    super.initState();
-    statesController = MaterialStatesController(<MaterialState>{if (widget.selected) MaterialState.selected});
+    statesController = WidgetStatesController(<WidgetState>{if (widget.selected) WidgetState.selected});
  }

  @override
  void didUpdateWidget(SelectableButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.selected != oldWidget.selected) {
-      statesController.update(MaterialState.selected, widget.selected);
+      statesController.update(WidgetState.selected, widget.selected);
    }
  }

@@ -73,17 +73,17 @@ class _HomeState extends State<Home> {
        child: SelectableButton(
          selected: selected,
          style: ButtonStyle(
-            foregroundColor: MaterialStateProperty.resolveWith<Color?>(
-              (Set<MaterialState> states) {
-                if (states.contains(MaterialState.selected)) {
+            foregroundColor: WidgetStateProperty.resolveWith<Color?>(
+              (Set<WidgetState> states) {
+                if (states.contains(WidgetState.selected)) {
                  return Colors.white;
                }
                return null; // defer to the defaults
              },
            ),
-            backgroundColor: MaterialStateProperty.resolveWith<Color?>(
-              (Set<MaterialState> states) {
-                if (states.contains(MaterialState.selected)) {
+            backgroundColor: WidgetStateProperty.resolveWith<Color?>(
+              (Set<WidgetState> states) {
+                if (states.contains(WidgetState.selected)) {
                  return Colors.indigo;
                }
                return null; // defer to the defaults
--- a/examples/api/lib/painting/axis_direction/axis_direction.0.dart
+++ b/examples/api/lib/painting/axis_direction/axis_direction.0.dart
@@ -81,7 +81,7 @@ class _MyWidgetState extends State<MyWidget> {
      style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
      child: RadioTheme(
        data: RadioThemeData(
-          fillColor: MaterialStateProperty.all<Color>(Colors.white),
+          fillColor: WidgetStateProperty.all<Color>(Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
--- a/examples/api/lib/painting/linear_border/linear_border.0.dart
+++ b/examples/api/lib/painting/linear_border/linear_border.0.dart
@@ -281,11 +281,11 @@ class _HomeState extends State<Home> {
                  ),
                  TextButton(
                    style: ButtonStyle(
-                      side: MaterialStateProperty.resolveWith<BorderSide?>((Set<MaterialState> states) {
-                        return states.contains(MaterialState.hovered) ? primarySide3 : null;
+                      side: WidgetStateProperty.resolveWith<BorderSide?>((Set<WidgetState> states) {
+                        return states.contains(WidgetState.hovered) ? primarySide3 : null;
                      }),
-                      shape: MaterialStateProperty.resolveWith<OutlinedBorder>((Set<MaterialState> states) {
-                        return states.contains(MaterialState.hovered) ? shape0 : shape1;
+                      shape: WidgetStateProperty.resolveWith<OutlinedBorder>((Set<WidgetState> states) {
+                        return states.contains(WidgetState.hovered) ? shape0 : shape1;
                      }),
                    ),
                    onPressed: () {},
--- a/examples/api/lib/rendering/growth_direction/growth_direction.0.dart
+++ b/examples/api/lib/rendering/growth_direction/growth_direction.0.dart
@@ -89,7 +89,7 @@ class _MyWidgetState extends State<MyWidget> {
      style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
      child: RadioTheme(
        data: RadioThemeData(
-          fillColor: MaterialStateProperty.all<Color>(Colors.white),
+          fillColor: WidgetStateProperty.all<Color>(Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
--- a/examples/api/lib/rendering/scroll_direction/scroll_direction.0.dart
+++ b/examples/api/lib/rendering/scroll_direction/scroll_direction.0.dart
@@ -85,7 +85,7 @@ class _MyWidgetState extends State<MyWidget> {
      style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
      child: RadioTheme(
        data: RadioThemeData(
-          fillColor: MaterialStateProperty.all<Color>(Colors.white),
+          fillColor: WidgetStateProperty.all<Color>(Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
--- a/examples/api/lib/widgets/actions/actions.0.dart
+++ b/examples/api/lib/widgets/actions/actions.0.dart
@@ -103,7 +103,7 @@ class _SaveButtonState extends State<SaveButton> {
          icon: const Icon(Icons.save),
          label: Text('$_savedValue'),
          style: ButtonStyle(
-            foregroundColor: MaterialStatePropertyAll<Color>(
+            foregroundColor: WidgetStatePropertyAll<Color>(
              widget.valueNotifier.value ? Colors.red : Colors.green,
            ),
          ),
--- a/examples/api/lib/widgets/focus_traversal/focus_traversal_group.0.dart
+++ b/examples/api/lib/widgets/focus_traversal/focus_traversal_group.0.dart
@@ -78,18 +78,18 @@ class _OrderedButtonState<T> extends State<OrderedButton<T>> {
      order = LexicalFocusOrder(widget.order.toString());
    }

-    Color? overlayColor(Set<MaterialState> states) {
-      if (states.contains(MaterialState.focused)) {
+    Color? overlayColor(Set<WidgetState> states) {
+      if (states.contains(WidgetState.focused)) {
        return Colors.red;
      }
-      if (states.contains(MaterialState.hovered)) {
+      if (states.contains(WidgetState.hovered)) {
        return Colors.blue;
      }
      return null; // defer to the default overlayColor
    }

-    Color? foregroundColor(Set<MaterialState> states) {
-      if (states.contains(MaterialState.focused) || states.contains(MaterialState.hovered)) {
+    Color? foregroundColor(Set<WidgetState> states) {
+      if (states.contains(WidgetState.focused) || states.contains(WidgetState.hovered)) {
        return Colors.white;
      }
      return null; // defer to the default foregroundColor
@@ -103,8 +103,8 @@ class _OrderedButtonState<T> extends State<OrderedButton<T>> {
          focusNode: focusNode,
          autofocus: widget.autofocus,
          style: ButtonStyle(
-            overlayColor: MaterialStateProperty.resolveWith<Color?>(overlayColor),
-            foregroundColor: MaterialStateProperty.resolveWith<Color?>(foregroundColor),
+            overlayColor: WidgetStateProperty.resolveWith<Color?>(overlayColor),
+            foregroundColor: WidgetStateProperty.resolveWith<Color?>(foregroundColor),
          ),
          onPressed: () => _handleOnPressed(),
          child: Text(widget.name),
--- a/examples/api/lib/widgets/sliver/pinned_header_sliver.0.dart
+++ b/examples/api/lib/widgets/sliver/pinned_header_sliver.0.dart
@@ -50,7 +50,7 @@ class _PinnedHeaderSliverExampleState extends State<PinnedHeaderSliverExample> {
    final ColorScheme colorScheme = theme.colorScheme;

    final Widget header = Container(
-      color: colorScheme.background,
+      color: colorScheme.surface,
      padding: const EdgeInsets.all(4),
      child: Material(
        color: colorScheme.primaryContainer,
--- a/examples/api/lib/widgets/sliver/sliver_floating_header.0.dart
+++ b/examples/api/lib/widgets/sliver/sliver_floating_header.0.dart
@@ -64,7 +64,7 @@ class ListHeader extends StatelessWidget {
    final ColorScheme colorScheme = theme.colorScheme;

    return Container(
-      color: colorScheme.background,
+      color: colorScheme.surface,
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Material(
        color: colorScheme.primaryContainer,
--- a/examples/api/lib/widgets/sliver/sliver_resizing_header.0.dart
+++ b/examples/api/lib/widgets/sliver/sliver_resizing_header.0.dart
@@ -88,7 +88,7 @@ class ListHeader extends StatelessWidget {
    final ColorScheme colorScheme = theme.colorScheme;

    return Container(
-      color: colorScheme.background,
+      color: colorScheme.surface,
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Material(
        color: colorScheme.primaryContainer,