Deprecate `ButtonBar` in favor of `OverflowBar`
Summary
#The ButtonBar
widget was deprecated in favor of
the more efficient OverflowBar
widget.
As a result, ThemeData.buttonBarTheme
and
ButtonBarTheme
were also deprecated.
Context
#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.
Description of change
#- Replace
ButtonBar
widget withOverflowBar
widget. - By default,
ButtonBar
aligns its children to the end of the layout, whileOverflowBar
aligns its children to the start. To align theOverflowBar
children to the end, set theOverflowBar.alignment
property toMainAxisAlignment.end
. ButtonBar.buttonPadding
provides spacing between buttons and padding around buttons. Replace it withOverflowBar.spacing
, which provides spacing between buttons. Wrap theOverflowBar
widget withPadding
widget to provide padding around the buttons.- Replace
ButtonBar.overflowButtonSpacing
withOverflowBar.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
fromThemeData
.
Migration guide
#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>[
// ...
],
),
Timeline
#Landed in version: 3.22.0-2.0.pre
In stable release: 3.24.0
References
#API documentation:
Relevant issues:
Relevant PRs:
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-09-04。 查看文档源码 或者 为本页面内容提出建议。