|
|
@ -112,6 +112,9 @@ class Containment extends StatelessWidget {
|
|
|
|
BottomSheetSection(),
|
|
|
|
BottomSheetSection(),
|
|
|
|
Cards(),
|
|
|
|
Cards(),
|
|
|
|
Dialogs(),
|
|
|
|
Dialogs(),
|
|
|
|
|
|
|
|
Dividers(),
|
|
|
|
|
|
|
|
// TODO: Add Lists, https://github.com/flutter/flutter/issues/114006
|
|
|
|
|
|
|
|
// TODO: Add Side sheets, https://github.com/flutter/flutter/issues/119328
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -130,7 +133,10 @@ class Navigation extends StatelessWidget {
|
|
|
|
isExampleBar: true,
|
|
|
|
isExampleBar: true,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
NavigationDrawers(scaffoldKey: scaffoldKey),
|
|
|
|
NavigationDrawers(scaffoldKey: scaffoldKey),
|
|
|
|
|
|
|
|
const NavigationRails(),
|
|
|
|
|
|
|
|
// TODO: Add Search https://github.com/flutter/flutter/issues/117483
|
|
|
|
const Tabs(),
|
|
|
|
const Tabs(),
|
|
|
|
|
|
|
|
const TopAppBars(),
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -141,12 +147,14 @@ class Selection extends StatelessWidget {
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return const ComponentGroupDecoration(label: 'Selection', children: [
|
|
|
|
return const ComponentGroupDecoration(label: 'Selection', children: [
|
|
|
|
|
|
|
|
Checkboxes(),
|
|
|
|
Chips(),
|
|
|
|
Chips(),
|
|
|
|
DropdownMenus(),
|
|
|
|
// TODO: Add Date pickers https://github.com/flutter/flutter/issues/101481
|
|
|
|
|
|
|
|
Menus(),
|
|
|
|
Radios(),
|
|
|
|
Radios(),
|
|
|
|
Checkboxes(),
|
|
|
|
|
|
|
|
Sliders(),
|
|
|
|
Sliders(),
|
|
|
|
Switches(),
|
|
|
|
Switches(),
|
|
|
|
|
|
|
|
// TODO: Add Time pickers https://github.com/flutter/flutter/issues/101480
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -179,14 +187,11 @@ class _ButtonsState extends State<Buttons> {
|
|
|
|
'Use ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton, or TextButton',
|
|
|
|
'Use ElevatedButton, FilledButton, FilledButton.tonal, OutlinedButton, or TextButton',
|
|
|
|
child: SingleChildScrollView(
|
|
|
|
child: SingleChildScrollView(
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: tinySpacing),
|
|
|
|
child: Row(
|
|
|
|
child: Column(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
|
|
|
children: const <Widget>[
|
|
|
|
children: const <Widget>[
|
|
|
|
ButtonsWithoutIcon(isDisabled: false),
|
|
|
|
ButtonsWithoutIcon(isDisabled: false),
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
ButtonsWithIcon(),
|
|
|
|
ButtonsWithIcon(),
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
ButtonsWithoutIcon(isDisabled: true),
|
|
|
|
ButtonsWithoutIcon(isDisabled: true),
|
|
|
|
],
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
@ -202,33 +207,39 @@ class ButtonsWithoutIcon extends StatelessWidget {
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return Row(
|
|
|
|
return Padding(
|
|
|
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 5.0),
|
|
|
|
|
|
|
|
child: IntrinsicWidth(
|
|
|
|
|
|
|
|
child: Column(
|
|
|
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
|
children: <Widget>[
|
|
|
|
children: <Widget>[
|
|
|
|
ElevatedButton(
|
|
|
|
ElevatedButton(
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
child: const Text('Elevated'),
|
|
|
|
child: const Text('Elevated'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
FilledButton(
|
|
|
|
FilledButton(
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
child: const Text('Filled'),
|
|
|
|
child: const Text('Filled'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
FilledButton.tonal(
|
|
|
|
FilledButton.tonal(
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
child: const Text('Filled tonal'),
|
|
|
|
child: const Text('Filled tonal'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
OutlinedButton(
|
|
|
|
OutlinedButton(
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
child: const Text('Outlined'),
|
|
|
|
child: const Text('Outlined'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
TextButton(
|
|
|
|
TextButton(
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
onPressed: isDisabled ? null : () {},
|
|
|
|
child: const Text('Text'),
|
|
|
|
child: const Text('Text'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -238,38 +249,44 @@ class ButtonsWithIcon extends StatelessWidget {
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return Row(
|
|
|
|
return Padding(
|
|
|
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0),
|
|
|
|
|
|
|
|
child: IntrinsicWidth(
|
|
|
|
|
|
|
|
child: Column(
|
|
|
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
|
children: <Widget>[
|
|
|
|
children: <Widget>[
|
|
|
|
ElevatedButton.icon(
|
|
|
|
ElevatedButton.icon(
|
|
|
|
onPressed: () {},
|
|
|
|
onPressed: () {},
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
FilledButton.icon(
|
|
|
|
FilledButton.icon(
|
|
|
|
onPressed: () {},
|
|
|
|
onPressed: () {},
|
|
|
|
label: const Text('Icon'),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
FilledButton.tonalIcon(
|
|
|
|
FilledButton.tonalIcon(
|
|
|
|
onPressed: () {},
|
|
|
|
onPressed: () {},
|
|
|
|
label: const Text('Icon'),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
OutlinedButton.icon(
|
|
|
|
OutlinedButton.icon(
|
|
|
|
onPressed: () {},
|
|
|
|
onPressed: () {},
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
const SizedBox(width: tinySpacing),
|
|
|
|
colDivider,
|
|
|
|
TextButton.icon(
|
|
|
|
TextButton.icon(
|
|
|
|
onPressed: () {},
|
|
|
|
onPressed: () {},
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
icon: const Icon(Icons.add),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
label: const Text('Icon'),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -597,21 +614,74 @@ class _DialogsState extends State<Dialogs> {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
void openFullscreenDialog(BuildContext context) {
|
|
|
|
|
|
|
|
showDialog<void>(
|
|
|
|
|
|
|
|
context: context,
|
|
|
|
|
|
|
|
builder: (context) => Dialog.fullscreen(
|
|
|
|
|
|
|
|
child: Padding(
|
|
|
|
|
|
|
|
padding: const EdgeInsets.all(20.0),
|
|
|
|
|
|
|
|
child: Scaffold(
|
|
|
|
|
|
|
|
appBar: AppBar(
|
|
|
|
|
|
|
|
title: const Text('Full-screen dialog'),
|
|
|
|
|
|
|
|
centerTitle: false,
|
|
|
|
|
|
|
|
leading: IconButton(
|
|
|
|
|
|
|
|
icon: const Icon(Icons.close),
|
|
|
|
|
|
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
actions: [
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
|
|
|
|
child: const Text('Close'),
|
|
|
|
|
|
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return Center(
|
|
|
|
return ComponentDecoration(
|
|
|
|
child: ComponentDecoration(
|
|
|
|
|
|
|
|
label: 'Dialog',
|
|
|
|
label: 'Dialog',
|
|
|
|
tooltipMessage: 'Use AlertDialog or SimpleDialog',
|
|
|
|
tooltipMessage:
|
|
|
|
child: UnconstrainedBox(
|
|
|
|
'Use showDialog with Dialog.fullscreen, AlertDialog, or SimpleDialog',
|
|
|
|
child: TextButton(
|
|
|
|
child: Wrap(
|
|
|
|
|
|
|
|
alignment: WrapAlignment.spaceBetween,
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
child: const Text(
|
|
|
|
child: const Text(
|
|
|
|
'Show dialog',
|
|
|
|
'Show dialog',
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
onPressed: () => openDialog(context),
|
|
|
|
onPressed: () => openDialog(context),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
|
|
|
|
child: const Text(
|
|
|
|
|
|
|
|
'Show full-screen dialog',
|
|
|
|
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
onPressed: () => openFullscreenDialog(context),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class Dividers extends StatelessWidget {
|
|
|
|
|
|
|
|
const Dividers({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
|
|
|
return ComponentDecoration(
|
|
|
|
|
|
|
|
label: 'Dividers',
|
|
|
|
|
|
|
|
tooltipMessage: 'Use Divider or VerticalDivider',
|
|
|
|
|
|
|
|
child: Column(
|
|
|
|
|
|
|
|
children: const <Widget>[
|
|
|
|
|
|
|
|
Divider(key: Key('divider')),
|
|
|
|
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -1299,7 +1369,7 @@ class SegmentedButtons extends StatelessWidget {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return ComponentDecoration(
|
|
|
|
return ComponentDecoration(
|
|
|
|
label: 'Segmented buttons',
|
|
|
|
label: 'Segmented buttons',
|
|
|
|
tooltipMessage: 'Use SegmentedButton',
|
|
|
|
tooltipMessage: 'Use SegmentedButton<T>',
|
|
|
|
child: Column(
|
|
|
|
child: Column(
|
|
|
|
children: const <Widget>[
|
|
|
|
children: const <Widget>[
|
|
|
|
SingleChoice(),
|
|
|
|
SingleChoice(),
|
|
|
@ -1400,7 +1470,8 @@ class SnackBarSection extends StatelessWidget {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return ComponentDecoration(
|
|
|
|
return ComponentDecoration(
|
|
|
|
label: 'Snackbar',
|
|
|
|
label: 'Snackbar',
|
|
|
|
tooltipMessage: 'Use SnackBar',
|
|
|
|
tooltipMessage:
|
|
|
|
|
|
|
|
'Use ScaffoldMessenger.of(context).showSnackBar with SnackBar',
|
|
|
|
child: TextButton(
|
|
|
|
child: TextButton(
|
|
|
|
onPressed: () {
|
|
|
|
onPressed: () {
|
|
|
|
final snackBar = SnackBar(
|
|
|
|
final snackBar = SnackBar(
|
|
|
@ -1425,9 +1496,17 @@ class SnackBarSection extends StatelessWidget {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class BottomSheetSection extends StatelessWidget {
|
|
|
|
class BottomSheetSection extends StatefulWidget {
|
|
|
|
const BottomSheetSection({super.key});
|
|
|
|
const BottomSheetSection({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
State<BottomSheetSection> createState() => _BottomSheetSectionState();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class _BottomSheetSectionState extends State<BottomSheetSection> {
|
|
|
|
|
|
|
|
bool isNonModalBottomSheetOpen = false;
|
|
|
|
|
|
|
|
PersistentBottomSheetController<void>? _nonModalBottomSheetController;
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
List<Widget> buttonList = <Widget>[
|
|
|
|
List<Widget> buttonList = <Widget>[
|
|
|
@ -1463,9 +1542,12 @@ class BottomSheetSection extends StatelessWidget {
|
|
|
|
return ComponentDecoration(
|
|
|
|
return ComponentDecoration(
|
|
|
|
label: 'Bottom sheet',
|
|
|
|
label: 'Bottom sheet',
|
|
|
|
tooltipMessage: 'Use showModalBottomSheet<T> or showBottomSheet<T>',
|
|
|
|
tooltipMessage: 'Use showModalBottomSheet<T> or showBottomSheet<T>',
|
|
|
|
child: TextButton(
|
|
|
|
child: Wrap(
|
|
|
|
|
|
|
|
alignment: WrapAlignment.spaceEvenly,
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
child: const Text(
|
|
|
|
child: const Text(
|
|
|
|
'Show bottom sheet',
|
|
|
|
'Show modal bottom sheet',
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
onPressed: () {
|
|
|
|
onPressed: () {
|
|
|
@ -1489,6 +1571,49 @@ class BottomSheetSection extends StatelessWidget {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
|
|
|
|
child: Text(
|
|
|
|
|
|
|
|
isNonModalBottomSheetOpen
|
|
|
|
|
|
|
|
? 'Hide bottom sheet'
|
|
|
|
|
|
|
|
: 'Show bottom sheet',
|
|
|
|
|
|
|
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
onPressed: () {
|
|
|
|
|
|
|
|
if (isNonModalBottomSheetOpen) {
|
|
|
|
|
|
|
|
_nonModalBottomSheetController?.close();
|
|
|
|
|
|
|
|
setState(() {
|
|
|
|
|
|
|
|
isNonModalBottomSheetOpen = false;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
setState(() {
|
|
|
|
|
|
|
|
isNonModalBottomSheetOpen = true;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_nonModalBottomSheetController = showBottomSheet<void>(
|
|
|
|
|
|
|
|
elevation: 8.0,
|
|
|
|
|
|
|
|
context: context,
|
|
|
|
|
|
|
|
// TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
|
|
|
|
|
|
|
|
constraints: const BoxConstraints(maxWidth: 640),
|
|
|
|
|
|
|
|
builder: (context) {
|
|
|
|
|
|
|
|
return SizedBox(
|
|
|
|
|
|
|
|
height: 150,
|
|
|
|
|
|
|
|
child: Padding(
|
|
|
|
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 32.0),
|
|
|
|
|
|
|
|
child: ListView(
|
|
|
|
|
|
|
|
shrinkWrap: true,
|
|
|
|
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
|
|
|
|
children: buttonList,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -1516,10 +1641,7 @@ class BottomAppBars extends StatelessWidget {
|
|
|
|
bottomNavigationBar: BottomAppBar(
|
|
|
|
bottomNavigationBar: BottomAppBar(
|
|
|
|
child: Row(
|
|
|
|
child: Row(
|
|
|
|
children: <Widget>[
|
|
|
|
children: <Widget>[
|
|
|
|
IconButton(
|
|
|
|
const IconButtonAnchorExample(),
|
|
|
|
icon: const Icon(Icons.more_vert),
|
|
|
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
IconButton(
|
|
|
|
IconButton(
|
|
|
|
tooltip: 'Search',
|
|
|
|
tooltip: 'Search',
|
|
|
|
icon: const Icon(Icons.search),
|
|
|
|
icon: const Icon(Icons.search),
|
|
|
@ -1541,6 +1663,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 {
|
|
|
|
class NavigationDrawers extends StatelessWidget {
|
|
|
|
const NavigationDrawers({super.key, required this.scaffoldKey});
|
|
|
|
const NavigationDrawers({super.key, required this.scaffoldKey});
|
|
|
|
final GlobalKey<ScaffoldState> scaffoldKey;
|
|
|
|
final GlobalKey<ScaffoldState> scaffoldKey;
|
|
|
@ -1549,15 +1759,21 @@ class NavigationDrawers extends StatelessWidget {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return ComponentDecoration(
|
|
|
|
return ComponentDecoration(
|
|
|
|
label: 'Navigation drawer',
|
|
|
|
label: 'Navigation drawer',
|
|
|
|
tooltipMessage: 'Use NavigationDrawer',
|
|
|
|
tooltipMessage:
|
|
|
|
child: UnconstrainedBox(
|
|
|
|
'Use NavigationDrawer. For modal navigation drawers, see Scaffold.endDrawer',
|
|
|
|
child: TextButton(
|
|
|
|
child: Column(
|
|
|
|
child: const Text('Show navigation drawer',
|
|
|
|
children: [
|
|
|
|
|
|
|
|
const SizedBox(height: 520, child: NavigationDrawerSection()),
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
TextButton(
|
|
|
|
|
|
|
|
child: const Text('Show modal navigation drawer',
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold)),
|
|
|
|
style: TextStyle(fontWeight: FontWeight.bold)),
|
|
|
|
onPressed: () {
|
|
|
|
onPressed: () {
|
|
|
|
scaffoldKey.currentState!.openEndDrawer();
|
|
|
|
scaffoldKey.currentState!.openEndDrawer();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -1598,10 +1814,7 @@ class _NavigationDrawerSectionState extends State<NavigationDrawerSection> {
|
|
|
|
selectedIcon: destination.selectedIcon,
|
|
|
|
selectedIcon: destination.selectedIcon,
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
const Padding(
|
|
|
|
const Divider(indent: 28, endIndent: 28),
|
|
|
|
padding: EdgeInsets.symmetric(horizontal: 28),
|
|
|
|
|
|
|
|
child: Divider(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
Padding(
|
|
|
|
Padding(
|
|
|
|
padding: const EdgeInsets.fromLTRB(28, 16, 16, 10),
|
|
|
|
padding: const EdgeInsets.fromLTRB(28, 16, 16, 10),
|
|
|
|
child: Text(
|
|
|
|
child: Text(
|
|
|
@ -1645,6 +1858,57 @@ const List<ExampleDestination> labelDestinations = <ExampleDestination>[
|
|
|
|
ExampleDestination('Work', Icon(Icons.bookmark_border), Icon(Icons.bookmark)),
|
|
|
|
ExampleDestination('Work', Icon(Icons.bookmark_border), Icon(Icons.bookmark)),
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class NavigationRails extends StatelessWidget {
|
|
|
|
|
|
|
|
const NavigationRails({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
|
|
|
return const ComponentDecoration(
|
|
|
|
|
|
|
|
label: 'Navigation rail',
|
|
|
|
|
|
|
|
tooltipMessage: 'Use NavigationRail',
|
|
|
|
|
|
|
|
child: IntrinsicWidth(
|
|
|
|
|
|
|
|
child: SizedBox(height: 420, child: NavigationRailSection())),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class NavigationRailSection extends StatefulWidget {
|
|
|
|
|
|
|
|
const NavigationRailSection({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
State<NavigationRailSection> createState() => _NavigationRailSectionState();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class _NavigationRailSectionState extends State<NavigationRailSection> {
|
|
|
|
|
|
|
|
int navRailIndex = 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
|
|
|
return NavigationRail(
|
|
|
|
|
|
|
|
onDestinationSelected: (selectedIndex) {
|
|
|
|
|
|
|
|
setState(() {
|
|
|
|
|
|
|
|
navRailIndex = selectedIndex;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
elevation: 4,
|
|
|
|
|
|
|
|
leading: FloatingActionButton(
|
|
|
|
|
|
|
|
child: const Icon(Icons.create), onPressed: () {}),
|
|
|
|
|
|
|
|
groupAlignment: 0.0,
|
|
|
|
|
|
|
|
selectedIndex: navRailIndex,
|
|
|
|
|
|
|
|
labelType: NavigationRailLabelType.selected,
|
|
|
|
|
|
|
|
destinations: <NavigationRailDestination>[
|
|
|
|
|
|
|
|
...destinations.map((destination) {
|
|
|
|
|
|
|
|
return NavigationRailDestination(
|
|
|
|
|
|
|
|
label: Text(destination.label),
|
|
|
|
|
|
|
|
icon: destination.icon,
|
|
|
|
|
|
|
|
selectedIcon: destination.selectedIcon,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class Tabs extends StatefulWidget {
|
|
|
|
class Tabs extends StatefulWidget {
|
|
|
|
const Tabs({super.key});
|
|
|
|
const Tabs({super.key});
|
|
|
|
|
|
|
|
|
|
|
@ -1690,6 +1954,7 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
// TODO: Showcase secondary tab bar https://github.com/flutter/flutter/issues/111962
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
@ -1697,14 +1962,84 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class DropdownMenus extends StatefulWidget {
|
|
|
|
class TopAppBars extends StatelessWidget {
|
|
|
|
const DropdownMenus({super.key});
|
|
|
|
const TopAppBars({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
static final actions = [
|
|
|
|
|
|
|
|
IconButton(icon: const Icon(Icons.attach_file), onPressed: () {}),
|
|
|
|
|
|
|
|
IconButton(icon: const Icon(Icons.event), onPressed: () {}),
|
|
|
|
|
|
|
|
IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
@override
|
|
|
|
State<DropdownMenus> createState() => _DropdownMenusState();
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
|
|
|
return ComponentDecoration(
|
|
|
|
|
|
|
|
label: 'Top app bars',
|
|
|
|
|
|
|
|
tooltipMessage:
|
|
|
|
|
|
|
|
'Use AppBar, SliverAppBar, SliverAppBar.medium, or SliverAppBar.large',
|
|
|
|
|
|
|
|
child: Column(
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
|
|
|
AppBar(
|
|
|
|
|
|
|
|
title: const Text('Center-aligned'),
|
|
|
|
|
|
|
|
leading: const BackButton(),
|
|
|
|
|
|
|
|
actions: [
|
|
|
|
|
|
|
|
IconButton(
|
|
|
|
|
|
|
|
iconSize: 32,
|
|
|
|
|
|
|
|
icon: const Icon(Icons.account_circle_outlined),
|
|
|
|
|
|
|
|
onPressed: () {},
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
centerTitle: true,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
AppBar(
|
|
|
|
|
|
|
|
title: const Text('Small'),
|
|
|
|
|
|
|
|
leading: const BackButton(),
|
|
|
|
|
|
|
|
actions: actions,
|
|
|
|
|
|
|
|
centerTitle: false,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
SizedBox(
|
|
|
|
|
|
|
|
height: 100,
|
|
|
|
|
|
|
|
child: CustomScrollView(
|
|
|
|
|
|
|
|
slivers: [
|
|
|
|
|
|
|
|
SliverAppBar.medium(
|
|
|
|
|
|
|
|
title: const Text('Medium'),
|
|
|
|
|
|
|
|
leading: const BackButton(),
|
|
|
|
|
|
|
|
actions: actions,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
const SliverFillRemaining(),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
SizedBox(
|
|
|
|
|
|
|
|
height: 130,
|
|
|
|
|
|
|
|
child: CustomScrollView(
|
|
|
|
|
|
|
|
slivers: [
|
|
|
|
|
|
|
|
SliverAppBar.large(
|
|
|
|
|
|
|
|
title: const Text('Large'),
|
|
|
|
|
|
|
|
leading: const BackButton(),
|
|
|
|
|
|
|
|
actions: actions,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
const SliverFillRemaining(),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class _DropdownMenusState extends State<DropdownMenus> {
|
|
|
|
class Menus extends StatefulWidget {
|
|
|
|
|
|
|
|
const Menus({super.key});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
|
|
|
State<Menus> createState() => _MenusState();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class _MenusState extends State<Menus> {
|
|
|
|
final TextEditingController colorController = TextEditingController();
|
|
|
|
final TextEditingController colorController = TextEditingController();
|
|
|
|
final TextEditingController iconController = TextEditingController();
|
|
|
|
final TextEditingController iconController = TextEditingController();
|
|
|
|
IconLabel? selectedIcon = IconLabel.smile;
|
|
|
|
IconLabel? selectedIcon = IconLabel.smile;
|
|
|
@ -1727,11 +2062,22 @@ class _DropdownMenusState extends State<DropdownMenus> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return ComponentDecoration(
|
|
|
|
return ComponentDecoration(
|
|
|
|
label: 'Dropdown menus',
|
|
|
|
label: 'Menus',
|
|
|
|
tooltipMessage: 'Use DropdownMenu<T>',
|
|
|
|
tooltipMessage: 'Use MenuAnchor or DropdownMenu<T>',
|
|
|
|
child: Wrap(
|
|
|
|
child: Column(
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
|
|
|
Row(
|
|
|
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
|
|
|
|
children: const <Widget>[
|
|
|
|
|
|
|
|
ButtonAnchorExample(),
|
|
|
|
|
|
|
|
rowDivider,
|
|
|
|
|
|
|
|
IconButtonAnchorExample(),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
colDivider,
|
|
|
|
|
|
|
|
Wrap(
|
|
|
|
alignment: WrapAlignment.spaceAround,
|
|
|
|
alignment: WrapAlignment.spaceAround,
|
|
|
|
runAlignment: WrapAlignment.start,
|
|
|
|
runAlignment: WrapAlignment.center,
|
|
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
|
|
spacing: smallSpacing,
|
|
|
|
spacing: smallSpacing,
|
|
|
|
runSpacing: smallSpacing,
|
|
|
|
runSpacing: smallSpacing,
|
|
|
@ -1766,6 +2112,8 @@ class _DropdownMenusState extends State<DropdownMenus> {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
],
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|