|
|
|
@ -179,14 +179,11 @@ class _ButtonsState extends State<Buttons> {
|
|
|
|
|
'Use ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton, or TextButton',
|
|
|
|
|
child: SingleChildScrollView(
|
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: tinySpacing),
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
child: Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
|
|
|
children: const <Widget>[
|
|
|
|
|
ButtonsWithoutIcon(isDisabled: false),
|
|
|
|
|
colDivider,
|
|
|
|
|
ButtonsWithIcon(),
|
|
|
|
|
colDivider,
|
|
|
|
|
ButtonsWithoutIcon(isDisabled: true),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
@ -202,33 +199,39 @@ class ButtonsWithoutIcon extends StatelessWidget {
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return Row(
|
|
|
|
|
return Padding(
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 5.0),
|
|
|
|
|
child: IntrinsicWidth(
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
ElevatedButton(
|
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
|
child: const Text('Elevated'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
FilledButton(
|
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
|
child: const Text('Filled'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
FilledButton.tonal(
|
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
|
child: const Text('Filled tonal'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
OutlinedButton(
|
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
|
child: const Text('Outlined'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
TextButton(
|
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
|
child: const Text('Text'),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -238,38 +241,44 @@ class ButtonsWithIcon extends StatelessWidget {
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return Row(
|
|
|
|
|
return Padding(
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0),
|
|
|
|
|
child: IntrinsicWidth(
|
|
|
|
|
child: Column(
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
ElevatedButton.icon(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
|
label: const Text('Icon'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
FilledButton.icon(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
label: const Text('Icon'),
|
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
FilledButton.tonalIcon(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
label: const Text('Icon'),
|
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
OutlinedButton.icon(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
|
label: const Text('Icon'),
|
|
|
|
|
),
|
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
|
colDivider,
|
|
|
|
|
TextButton.icon(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
|
label: const Text('Icon'),
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -1516,10 +1525,7 @@ class BottomAppBars extends StatelessWidget {
|
|
|
|
|
bottomNavigationBar: BottomAppBar(
|
|
|
|
|
child: Row(
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
IconButton(
|
|
|
|
|
icon: const Icon(Icons.more_vert),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
),
|
|
|
|
|
const IconButtonAnchorExample(),
|
|
|
|
|
IconButton(
|
|
|
|
|
tooltip: 'Search',
|
|
|
|
|
icon: const Icon(Icons.search),
|
|
|
|
@ -1541,6 +1547,94 @@ class BottomAppBars extends StatelessWidget {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class IconButtonAnchorExample extends StatelessWidget {
|
|
|
|
|
const IconButtonAnchorExample({super.key});
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return MenuAnchor(
|
|
|
|
|
builder: (context, controller, child) {
|
|
|
|
|
return IconButton(
|
|
|
|
|
onPressed: () {
|
|
|
|
|
if (controller.isOpen) {
|
|
|
|
|
controller.close();
|
|
|
|
|
} else {
|
|
|
|
|
controller.open();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
icon: const Icon(Icons.more_vert),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
menuChildren: [
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
child: const Text('Menu 1'),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
),
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
child: const Text('Menu 2'),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
),
|
|
|
|
|
SubmenuButton(
|
|
|
|
|
menuChildren: <Widget>[
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
child: const Text('Menu 3.1'),
|
|
|
|
|
),
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
child: const Text('Menu 3.2'),
|
|
|
|
|
),
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
child: const Text('Menu 3.3'),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
child: const Text('Menu 3'),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class ButtonAnchorExample extends StatelessWidget {
|
|
|
|
|
const ButtonAnchorExample({super.key});
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return MenuAnchor(
|
|
|
|
|
builder: (context, controller, child) {
|
|
|
|
|
return FilledButton.tonal(
|
|
|
|
|
onPressed: () {
|
|
|
|
|
if (controller.isOpen) {
|
|
|
|
|
controller.close();
|
|
|
|
|
} else {
|
|
|
|
|
controller.open();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
child: const Text('Show menu'),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
menuChildren: [
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
leadingIcon: const Icon(Icons.people_alt_outlined),
|
|
|
|
|
child: const Text('Item 1'),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
),
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
leadingIcon: const Icon(Icons.remove_red_eye_outlined),
|
|
|
|
|
child: const Text('Item 2'),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
),
|
|
|
|
|
MenuItemButton(
|
|
|
|
|
leadingIcon: const Icon(Icons.refresh),
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
child: const Text('Item 3'),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class NavigationDrawers extends StatelessWidget {
|
|
|
|
|
const NavigationDrawers({super.key, required this.scaffoldKey});
|
|
|
|
|
final GlobalKey<ScaffoldState> scaffoldKey;
|
|
|
|
@ -1727,9 +1821,23 @@ class _DropdownMenusState extends State<DropdownMenus> {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return ComponentDecoration(
|
|
|
|
|
label: 'Dropdown menus',
|
|
|
|
|
tooltipMessage: 'Use DropdownMenu<T>',
|
|
|
|
|
child: Wrap(
|
|
|
|
|
label: 'Menus',
|
|
|
|
|
tooltipMessage: 'Use DropdownMenu<T> or MenuAnchor',
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
|
|
|
children: const <Widget>[
|
|
|
|
|
ButtonAnchorExample(),
|
|
|
|
|
rowDivider,
|
|
|
|
|
IconButtonAnchorExample(),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
colDivider,
|
|
|
|
|
Wrap(
|
|
|
|
|
alignment: WrapAlignment.spaceAround,
|
|
|
|
|
runAlignment: WrapAlignment.start,
|
|
|
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
|
|
@ -1766,6 +1874,8 @@ class _DropdownMenusState extends State<DropdownMenus> {
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|