Deprecate `ButtonBar` in favor of `OverflowBar`

The ButtonBar widget was deprecated in favor of the more efficient OverflowBar widget. As a result, ThemeData.buttonBarTheme and ButtonBarTheme were also deprecated.

The ButtonBar widget lays out its children in a row and in a column if there is not enough horizontal space. The OverflowBar widget does the same, but it's not tied to the Material library and is part of the core widgets.dart library.

• Replace ButtonBar widget with OverflowBar widget.
• By default, ButtonBar aligns its children to the end of the layout, while OverflowBar aligns its children to the start. To align the OverflowBar children to the end, set the OverflowBar.alignment property to MainAxisAlignment.end.
• ButtonBar.buttonPadding provides spacing between buttons and padding around buttons. Replace it with OverflowBar.spacing, which provides spacing between buttons. Wrap the OverflowBar widget with Padding widget to provide padding around the buttons.
• Replace ButtonBar.overflowButtonSpacing with OverflowBar.overflowSpacing, which provides spacing between buttons when the buttons are laid in a column when there is not enough horizontal space.
• If it is specified, remove ButtonBarThemeData from ThemeData.

Replace ButtonBar with OverflowBar, override the default alignment if necessary, replace ButtonBar.buttonPadding with Padding widget and OverflowBar.spacing for spacing between and around buttons, and replace ButtonBar.overflowButtonSpacing with OverflowBar.overflowSpacing for spacing between buttons when the buttons are laid in a column when there is not enough horizontal space.

Before:

ButtonBar(
  buttonPadding: const EdgeInsets.all(8.0),
  overflowButtonSpacing: 8.0,
  children: <Widget>[
    TextButton(child: const Text('Button 1'), onPressed: () {}),
    TextButton(child: const Text('Button 2'), onPressed: () {}),
    TextButton(child: const Text('Button 3'), onPressed: () {}),
  ],
),

After:

Padding(
  padding: const EdgeInsets.all(8.0),
  child: OverflowBar(
    alignment: MainAxisAlignment.end,
    spacing: 8.0,
    overflowSpacing: 8.0,
    children: <Widget>[
      TextButton(child: const Text('Button 1'), onPressed: () {}),
      TextButton(child: const Text('Button 2'), onPressed: () {}),
      TextButton(child: const Text('Button 3'), onPressed: () {}),
    ],
  ),
),

If you specify a ThemeData.buttonBarTheme, remove it and use the OverflowBar widget properties to customize the OverflowBar widget.

Before:

ThemeData(
  buttonBarTheme: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  ),
),

After:

ThemeData(
  // ...
),

If you use the ButtonBarTheme widget, remove it and use the OverflowBar widget properties to customize the OverflowBar widget.

Before:

ButtonBarTheme(
  data: ButtonBarThemeData(
    alignment: MainAxisAlignment.center,
  ),
  child: ButtonBar(
    children: <Widget>[
      // ...
    ],
  ),
),

After:

OverflowBar(
  alignment: MainAxisAlignment.center,
  children: <Widget>[
    // ...
  ],
),

Landed in version: 3.22.0-2.0.pre
In stable release: 3.24.0

API documentation:

• OverflowBar
• ButtonBar

Relevant issues:

• Issue #127955

Relevant PRs:

• Deprecate ButtonBar, ButtonBarThemeData, and ThemeData.buttonBarTheme

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-08-06. View source or report an issue.