Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 14:58:34 +00:00
Code Issues Releases Wiki Activity

Update M3 app (#1606)

Browse Source
This commit is contained in:
Pierre-Louis
2023-01-28 06:46:33 +01:00
committed by GitHub
parent a15a98252d
commit 2e3dfb0e8d
18 changed files with 607 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
experimental/material_3_demo/lib/color_palettes_screen.dart
View File

@@ -2,7 +2,9 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
const Widget divider = SizedBox(height: 10);
@@ -45,18 +47,46 @@ class ColorPalettesScreen extends StatelessWidget {
);
}
Widget dynamicColorNotice() => RichText(
textAlign: TextAlign.center,
text: TextSpan(
style: Theme.of(context).textTheme.bodySmall,
children: [
const TextSpan(
text: 'To create color schemes based on a '
'platform\'s implementation of dynamic color, '
'use the '),
TextSpan(
text: 'dynamic_color',
style: const TextStyle(decoration: TextDecoration.underline),
recognizer: TapGestureRecognizer()
..onTap = () async {
final url = Uri.parse(
'https://pub.dev/packages/dynamic_color',
);
if (!await launchUrl(url)) {
throw Exception('Could not launch $url');
}
},
),
const TextSpan(text: ' package.'),
],
),
);
return Expanded(
child: LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth < narrowScreenWidthThreshold) {
return SingleChildScrollView(
child: Column(
children: [
dynamicColorNotice(),
divider,
schemeLabel('Light Theme'),
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
divider,
divider,
schemeLabel('Dark Theme'),
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
@@ -65,23 +95,28 @@ class ColorPalettesScreen extends StatelessWidget {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
child: Column(
children: [
Expanded(
child: Column(
children: [
schemeLabel('Light Theme'),
schemeView(lightTheme),
],
),
),
Expanded(
child: Column(
children: [
schemeLabel('Dark Theme'),
schemeView(darkTheme),
],
),
dynamicColorNotice(),
Row(
children: [
Expanded(
child: Column(
children: [
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
],
),
),
Expanded(
child: Column(
children: [
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
),
],
),
],
),

356
experimental/material_3_demo/lib/component_screen.dart
View File

@@ -112,6 +112,9 @@ class Containment extends StatelessWidget {
BottomSheetSection(),
Cards(),
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,
),
NavigationDrawers(scaffoldKey: scaffoldKey),
const NavigationRails(),
// TODO: Add Search https://github.com/flutter/flutter/issues/117483
const Tabs(),
const TopAppBars(),
]);
}
}
@@ -141,12 +147,14 @@ class Selection extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const ComponentGroupDecoration(label: 'Selection', children: [
Chips(),
DropdownMenus(),
Radios(),
Checkboxes(),
Chips(),
// TODO: Add Date pickers https://github.com/flutter/flutter/issues/101481
Menus(),
Radios(),
Sliders(),
Switches(),
// TODO: Add Time pickers https://github.com/flutter/flutter/issues/101480
]);
}
}
@@ -606,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
Widget build(BuildContext context) {
return Center(
child: ComponentDecoration(
label: 'Dialog',
tooltipMessage: 'Use AlertDialog or SimpleDialog',
child: UnconstrainedBox(
child: TextButton(
return ComponentDecoration(
label: 'Dialog',
tooltipMessage:
'Use showDialog with Dialog.fullscreen, AlertDialog, or SimpleDialog',
child: Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
TextButton(
child: const Text(
'Show dialog',
style: TextStyle(fontWeight: FontWeight.bold),
),
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')),
],
),
);
}
@@ -1308,7 +1369,7 @@ class SegmentedButtons extends StatelessWidget {
Widget build(BuildContext context) {
return ComponentDecoration(
label: 'Segmented buttons',
tooltipMessage: 'Use SegmentedButton',
tooltipMessage: 'Use SegmentedButton<T>',
child: Column(
children: const <Widget>[
SingleChoice(),
@@ -1409,7 +1470,8 @@ class SnackBarSection extends StatelessWidget {
Widget build(BuildContext context) {
return ComponentDecoration(
label: 'Snackbar',
tooltipMessage: 'Use SnackBar',
tooltipMessage:
'Use ScaffoldMessenger.of(context).showSnackBar with SnackBar',
child: TextButton(
onPressed: () {
final snackBar = SnackBar(
@@ -1434,9 +1496,17 @@ class SnackBarSection extends StatelessWidget {
}
}
class BottomSheetSection extends StatelessWidget {
class BottomSheetSection extends StatefulWidget {
const BottomSheetSection({super.key});
@override
State<BottomSheetSection> createState() => _BottomSheetSectionState();
}
class _BottomSheetSectionState extends State<BottomSheetSection> {
bool isNonModalBottomSheetOpen = false;
PersistentBottomSheetController<void>? _nonModalBottomSheetController;
@override
Widget build(BuildContext context) {
List<Widget> buttonList = <Widget>[
@@ -1472,31 +1542,77 @@ class BottomSheetSection extends StatelessWidget {
return ComponentDecoration(
label: 'Bottom sheet',
tooltipMessage: 'Use showModalBottomSheet<T> or showBottomSheet<T>',
child: TextButton(
child: const Text(
'Show bottom sheet',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () {
showModalBottomSheet<void>(
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,
),
),
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: [
TextButton(
child: const Text(
'Show modal bottom sheet',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () {
showModalBottomSheet<void>(
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,
),
),
);
},
);
},
);
},
),
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,
),
),
);
},
);
},
),
],
),
);
}
@@ -1643,15 +1759,21 @@ class NavigationDrawers extends StatelessWidget {
Widget build(BuildContext context) {
return ComponentDecoration(
label: 'Navigation drawer',
tooltipMessage: 'Use NavigationDrawer',
child: UnconstrainedBox(
child: TextButton(
child: const Text('Show navigation drawer',
style: TextStyle(fontWeight: FontWeight.bold)),
onPressed: () {
scaffoldKey.currentState!.openEndDrawer();
},
),
tooltipMessage:
'Use NavigationDrawer. For modal navigation drawers, see Scaffold.endDrawer',
child: Column(
children: [
const SizedBox(height: 520, child: NavigationDrawerSection()),
colDivider,
colDivider,
TextButton(
child: const Text('Show modal navigation drawer',
style: TextStyle(fontWeight: FontWeight.bold)),
onPressed: () {
scaffoldKey.currentState!.openEndDrawer();
},
),
],
),
);
}
@@ -1692,10 +1814,7 @@ class _NavigationDrawerSectionState extends State<NavigationDrawerSection> {
selectedIcon: destination.selectedIcon,
);
}),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 28),
child: Divider(),
),
const Divider(indent: 28, endIndent: 28),
Padding(
padding: const EdgeInsets.fromLTRB(28, 16, 16, 10),
child: Text(
@@ -1739,6 +1858,57 @@ const List<ExampleDestination> labelDestinations = <ExampleDestination>[
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 {
const Tabs({super.key});
@@ -1784,6 +1954,7 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
),
],
),
// TODO: Showcase secondary tab bar https://github.com/flutter/flutter/issues/111962
),
),
),
@@ -1791,14 +1962,84 @@ class _TabsState extends State<Tabs> with TickerProviderStateMixin {
}
}
class DropdownMenus extends StatefulWidget {
const DropdownMenus({super.key});
class TopAppBars extends StatelessWidget {
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
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 iconController = TextEditingController();
IconLabel? selectedIcon = IconLabel.smile;
@@ -1822,14 +2063,11 @@ class _DropdownMenusState extends State<DropdownMenus> {
return ComponentDecoration(
label: 'Menus',
tooltipMessage: 'Use DropdownMenu<T> or MenuAnchor',
tooltipMessage: 'Use MenuAnchor or DropdownMenu<T>',
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
ButtonAnchorExample(),
rowDivider,
@@ -1839,7 +2077,7 @@ class _DropdownMenusState extends State<DropdownMenus> {
colDivider,
Wrap(
alignment: WrapAlignment.spaceAround,
runAlignment: WrapAlignment.start,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
spacing: smallSpacing,
runSpacing: smallSpacing,