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

[material_3_demo] Refactor application code into multiple small libraries (#2581)

Browse Source
This commit is contained in:
Kevin Moore
2025-02-18 09:41:16 -06:00
committed by GitHub
parent a8d02fbc7a
commit 6cf81895d1
23 changed files with 1000 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
material_3_demo/lib/src/animations.dart Normal file
View File

@@ -0,0 +1,31 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class SizeAnimation extends CurvedAnimation {
SizeAnimation(Animation<double> parent)
: super(
parent: parent,
curve: const Interval(0.2, 0.8, curve: Curves.easeInOutCubicEmphasized),
reverseCurve: Interval(
0,
0.2,
curve: Curves.easeInOutCubicEmphasized.flipped,
),
);
}
class OffsetAnimation extends CurvedAnimation {
OffsetAnimation(Animation<double> parent)
: super(
parent: parent,
curve: const Interval(0.4, 1.0, curve: Curves.easeInOutCubicEmphasized),
reverseCurve: Interval(
0,
0.2,
curve: Curves.easeInOutCubicEmphasized.flipped,
),
);
}

59
material_3_demo/lib/src/bar_transition.dart Normal file
View File

@@ -0,0 +1,59 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/widgets.dart';
import 'animations.dart';
class BarTransition extends StatefulWidget {
const BarTransition({
super.key,
required this.animation,
required this.backgroundColor,
required this.child,
});
final Animation<double> animation;
final Color backgroundColor;
final Widget child;
@override
State<BarTransition> createState() => _BarTransition();
}
class _BarTransition extends State<BarTransition> {
late final Animation<Offset> offsetAnimation;
late final Animation<double> heightAnimation;
@override
void initState() {
super.initState();
offsetAnimation = Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
).animate(OffsetAnimation(widget.animation));
heightAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(SizeAnimation(widget.animation));
}
@override
Widget build(BuildContext context) {
return ClipRect(
child: DecoratedBox(
decoration: BoxDecoration(color: widget.backgroundColor),
child: Align(
alignment: Alignment.topLeft,
heightFactor: heightAnimation.value,
child: FractionalTranslation(
translation: offsetAnimation.value,
child: widget.child,
),
),
),
);
}
}

173
material_3_demo/lib/src/buttons.dart Normal file
View File

@@ -0,0 +1,173 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class BrightnessButton extends StatelessWidget {
const BrightnessButton({
super.key,
required this.handleBrightnessChange,
this.showTooltipBelow = true,
});
final void Function(bool useLightMode) handleBrightnessChange;
final bool showTooltipBelow;
@override
Widget build(BuildContext context) {
final isBright = Theme.of(context).brightness == Brightness.light;
return Tooltip(
preferBelow: showTooltipBelow,
message: 'Toggle brightness',
child: IconButton(
icon:
isBright
? const Icon(Icons.dark_mode_outlined)
: const Icon(Icons.light_mode_outlined),
onPressed: () => handleBrightnessChange(!isBright),
),
);
}
}
class Material3Button extends StatelessWidget {
const Material3Button({
super.key,
required this.handleMaterialVersionChange,
this.showTooltipBelow = true,
});
final void Function() handleMaterialVersionChange;
final bool showTooltipBelow;
@override
Widget build(BuildContext context) {
final useMaterial3 = Theme.of(context).useMaterial3;
return Tooltip(
preferBelow: showTooltipBelow,
message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
child: IconButton(
icon:
useMaterial3
? const Icon(Icons.filter_2)
: const Icon(Icons.filter_3),
onPressed: handleMaterialVersionChange,
),
);
}
}
class ColorSeedButton extends StatelessWidget {
const ColorSeedButton({
super.key,
required this.handleColorSelect,
required this.colorSelected,
required this.colorSelectionMethod,
});
final void Function(int) handleColorSelect;
final ColorSeed colorSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: const Icon(Icons.palette_outlined),
tooltip: 'Select a seed color',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorSeed.values.length, (index) {
ColorSeed currentColor = ColorSeed.values[index];
return PopupMenuItem(
value: index,
enabled:
currentColor != colorSelected ||
colorSelectionMethod != ColorSelectionMethod.colorSeed,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
currentColor == colorSelected &&
colorSelectionMethod != ColorSelectionMethod.image
? Icons.color_lens
: Icons.color_lens_outlined,
color: currentColor.color,
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentColor.label),
),
],
),
);
});
},
onSelected: handleColorSelect,
);
}
}
class ColorImageButton extends StatelessWidget {
const ColorImageButton({
super.key,
required this.handleImageSelect,
required this.imageSelected,
required this.colorSelectionMethod,
});
final void Function(int) handleImageSelect;
final ColorImageProvider imageSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: const Icon(Icons.image_outlined),
tooltip: 'Select a color extraction image',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorImageProvider.values.length, (index) {
final currentImageProvider = ColorImageProvider.values[index];
return PopupMenuItem(
value: index,
enabled:
currentImageProvider != imageSelected ||
colorSelectionMethod != ColorSelectionMethod.image,
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 48),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image(
image: NetworkImage(currentImageProvider.url),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentImageProvider.label),
),
],
),
);
});
},
onSelected: handleImageSelect,
);
}
}

96
material_3_demo/lib/src/color_box.dart Normal file
View File

@@ -0,0 +1,96 @@
// Copyright 2024 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class ColorBox extends StatefulWidget {
const ColorBox({
super.key,
required this.label,
required this.tone,
required this.color,
required this.onColor,
required this.height,
required this.width,
this.displayPaletteInfo = false,
});
final String label;
final String tone;
final Color color, onColor;
final double height, width;
final bool displayPaletteInfo;
@override
State<ColorBox> createState() => _ColorBoxState();
}
class _ColorBoxState extends State<ColorBox> {
bool hovered = false;
@override
Widget build(BuildContext context) {
final fonts = Theme.of(context).textTheme;
return MouseRegion(
onEnter: (_) {
if (mounted) setState(() => hovered = true);
},
onExit: (_) {
if (mounted) setState(() => hovered = false);
},
child: Container(
color: widget.color,
height: widget.height,
width: widget.width,
child: DefaultTextStyle(
style: fonts.labelSmall!.copyWith(color: widget.onColor),
child: Stack(
children: [
Positioned(top: 10, left: 10, child: Text(widget.label)),
Positioned(
bottom: 10,
right: 10,
child: Text(widget.displayPaletteInfo ? widget.tone : ''),
),
if (hovered)
Positioned(
top: 0,
right: 0,
child: IconButton(
padding: EdgeInsets.zero,
color: widget.onColor,
tooltip: 'Copy hex color',
icon: const Icon(Icons.copy, size: 24),
onPressed: () async {
final messenger = ScaffoldMessenger.of(context);
// Copy color as hex to clipboard
final c = widget.color;
final hex =
'#${_colorChannelToHex(c.r)}'
'${_colorChannelToHex(c.g)}'
'${_colorChannelToHex(c.b)}';
final data = ClipboardData(text: hex);
await Clipboard.setData(data);
messenger.hideCurrentSnackBar();
messenger.showSnackBar(
SnackBar(content: Text('Copied $hex to clipboard')),
);
},
),
),
],
),
),
),
);
}
}
String _colorChannelToHex(double value) {
final intVal = (value * 255).round();
return intVal.toRadixString(16).padLeft(2, '0');
}

463
material_3_demo/lib/src/color_palettes_screen.dart Normal file
View File

@@ -0,0 +1,463 @@
// Copyright 2021 The Flutter team. All rights reserved.
// 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';
import 'scheme.dart';
const Widget divider = SizedBox(height: 10);
// If screen content width is greater or equal to this value, the light and dark
// color schemes will be displayed in a column. Otherwise, they will
// be displayed in a row.
const double narrowScreenWidthThreshold = 500;
class ColorPalettesScreen extends StatelessWidget {
const ColorPalettesScreen({super.key});
@override
Widget build(BuildContext context) {
Color selectedColor = Theme.of(context).primaryColor;
ThemeData lightTheme = ThemeData(
colorSchemeSeed: selectedColor,
brightness: Brightness.light,
);
ThemeData darkTheme = ThemeData(
colorSchemeSeed: selectedColor,
brightness: Brightness.dark,
);
Widget schemeLabel(String brightness) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 15),
child: Text(
brightness,
style: const TextStyle(fontWeight: FontWeight.bold),
),
);
}
Widget schemeView(ThemeData theme) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ColorSchemeView(colorScheme: theme.colorScheme),
);
}
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 ColorScheme'),
schemeView(lightTheme),
divider,
divider,
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
);
} else {
Color seed = Theme.of(context).colorScheme.primary;
ColorScheme lightScheme = ColorScheme.fromSeed(
seedColor: seed,
brightness: Brightness.light,
);
ColorScheme darkScheme = ColorScheme.fromSeed(
seedColor: seed,
brightness: Brightness.dark,
);
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
SchemePreview(
label: "Light ColorScheme",
scheme: lightScheme,
brightness: Brightness.light,
contrast: 1.0,
colorMatch: false,
),
const SizedBox(height: 16),
SchemePreview(
label: "Dark ColorScheme",
scheme: darkScheme,
brightness: Brightness.dark,
contrast: 1.0,
colorMatch: false,
),
const SizedBox(height: 16),
],
),
),
);
}
},
),
);
}
}
class ColorSchemeView extends StatelessWidget {
const ColorSchemeView({super.key, required this.colorScheme});
final ColorScheme colorScheme;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ColorGroup(
children: [
ColorChip(
label: 'primary',
color: colorScheme.primary,
onColor: colorScheme.onPrimary,
),
ColorChip(
label: 'onPrimary',
color: colorScheme.onPrimary,
onColor: colorScheme.primary,
),
ColorChip(
label: 'primaryContainer',
color: colorScheme.primaryContainer,
onColor: colorScheme.onPrimaryContainer,
),
ColorChip(
label: 'onPrimaryContainer',
color: colorScheme.onPrimaryContainer,
onColor: colorScheme.primaryContainer,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'primaryFixed',
color: colorScheme.primaryFixed,
onColor: colorScheme.onPrimaryFixed,
),
ColorChip(
label: 'onPrimaryFixed',
color: colorScheme.onPrimaryFixed,
onColor: colorScheme.primaryFixed,
),
ColorChip(
label: 'primaryFixedDim',
color: colorScheme.primaryFixedDim,
onColor: colorScheme.onPrimaryFixedVariant,
),
ColorChip(
label: 'onPrimaryFixedVariant',
color: colorScheme.onPrimaryFixedVariant,
onColor: colorScheme.primaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'secondary',
color: colorScheme.secondary,
onColor: colorScheme.onSecondary,
),
ColorChip(
label: 'onSecondary',
color: colorScheme.onSecondary,
onColor: colorScheme.secondary,
),
ColorChip(
label: 'secondaryContainer',
color: colorScheme.secondaryContainer,
onColor: colorScheme.onSecondaryContainer,
),
ColorChip(
label: 'onSecondaryContainer',
color: colorScheme.onSecondaryContainer,
onColor: colorScheme.secondaryContainer,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'secondaryFixed',
color: colorScheme.secondaryFixed,
onColor: colorScheme.onSecondaryFixed,
),
ColorChip(
label: 'onSecondaryFixed',
color: colorScheme.onSecondaryFixed,
onColor: colorScheme.secondaryFixed,
),
ColorChip(
label: 'secondaryFixedDim',
color: colorScheme.secondaryFixedDim,
onColor: colorScheme.onSecondaryFixedVariant,
),
ColorChip(
label: 'onSecondaryFixedVariant',
color: colorScheme.onSecondaryFixedVariant,
onColor: colorScheme.secondaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'tertiary',
color: colorScheme.tertiary,
onColor: colorScheme.onTertiary,
),
ColorChip(
label: 'onTertiary',
color: colorScheme.onTertiary,
onColor: colorScheme.tertiary,
),
ColorChip(
label: 'tertiaryContainer',
color: colorScheme.tertiaryContainer,
onColor: colorScheme.onTertiaryContainer,
),
ColorChip(
label: 'onTertiaryContainer',
color: colorScheme.onTertiaryContainer,
onColor: colorScheme.tertiaryContainer,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'tertiaryFixed',
color: colorScheme.tertiaryFixed,
onColor: colorScheme.onTertiaryFixed,
),
ColorChip(
label: 'onTertiaryFixed',
color: colorScheme.onTertiaryFixed,
onColor: colorScheme.tertiaryFixed,
),
ColorChip(
label: 'tertiaryFixedDim',
color: colorScheme.tertiaryFixedDim,
onColor: colorScheme.onTertiaryFixedVariant,
),
ColorChip(
label: 'onTertiaryFixedVariant',
color: colorScheme.onTertiaryFixedVariant,
onColor: colorScheme.tertiaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'error',
color: colorScheme.error,
onColor: colorScheme.onError,
),
ColorChip(
label: 'onError',
color: colorScheme.onError,
onColor: colorScheme.error,
),
ColorChip(
label: 'errorContainer',
color: colorScheme.errorContainer,
onColor: colorScheme.onErrorContainer,
),
ColorChip(
label: 'onErrorContainer',
color: colorScheme.onErrorContainer,
onColor: colorScheme.errorContainer,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'surfaceDim',
color: colorScheme.surfaceDim,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surface',
color: colorScheme.surface,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceBright',
color: colorScheme.surfaceBright,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerLowest',
color: colorScheme.surfaceContainerLowest,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerLow',
color: colorScheme.surfaceContainerLow,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainer',
color: colorScheme.surfaceContainer,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerHigh',
color: colorScheme.surfaceContainerHigh,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerHighest',
color: colorScheme.surfaceContainerHighest,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'onSurface',
color: colorScheme.onSurface,
onColor: colorScheme.surface,
),
ColorChip(
label: 'onSurfaceVariant',
color: colorScheme.onSurfaceVariant,
onColor: colorScheme.surfaceContainerHighest,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'outline',
color: colorScheme.outline,
onColor: null,
),
ColorChip(
label: 'shadow',
color: colorScheme.shadow,
onColor: null,
),
ColorChip(
label: 'inverseSurface',
color: colorScheme.inverseSurface,
onColor: colorScheme.onInverseSurface,
),
ColorChip(
label: 'onInverseSurface',
color: colorScheme.onInverseSurface,
onColor: colorScheme.inverseSurface,
),
ColorChip(
label: 'inversePrimary',
color: colorScheme.inversePrimary,
onColor: colorScheme.primary,
),
],
),
],
);
}
}
class ColorGroup extends StatelessWidget {
const ColorGroup({super.key, required this.children});
final List<ColorChip> children;
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: Card(
clipBehavior: Clip.antiAlias,
child: Column(children: children),
),
);
}
}
class ColorChip extends StatelessWidget {
const ColorChip({
super.key,
required this.color,
required this.label,
this.onColor,
});
final Color color;
final Color? onColor;
final String label;
static Color contrastColor(Color color) =>
switch (ThemeData.estimateBrightnessForColor(color)) {
Brightness.dark => Colors.white,
Brightness.light => Colors.black,
};
@override
Widget build(BuildContext context) {
final Color labelColor = onColor ?? contrastColor(color);
return Container(
color: color,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(child: Text(label, style: TextStyle(color: labelColor))),
],
),
),
);
}
}

2624
material_3_demo/lib/src/component_screen.dart Normal file
View File

File diff suppressed because it is too large Load Diff

75
material_3_demo/lib/src/constants.dart Normal file
View File

@@ -0,0 +1,75 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
// NavigationRail shows if the screen width is greater or equal to
// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
const double narrowScreenWidthThreshold = 450;
const double mediumWidthBreakpoint = 1000;
const double largeWidthBreakpoint = 1500;
const double transitionLength = 500;
// Whether the user has chosen a theme color via a direct [ColorSeed] selection,
// or an image [ColorImageProvider].
enum ColorSelectionMethod { colorSeed, image }
enum ColorSeed {
baseColor('M3 Baseline', Color(0xff6750a4)),
indigo('Indigo', Colors.indigo),
blue('Blue', Colors.blue),
teal('Teal', Colors.teal),
green('Green', Colors.green),
yellow('Yellow', Colors.yellow),
orange('Orange', Colors.orange),
deepOrange('Deep Orange', Colors.deepOrange),
pink('Pink', Colors.pink);
const ColorSeed(this.label, this.color);
final String label;
final Color color;
}
enum ColorImageProvider {
leaves(
'Leaves',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png',
),
peonies(
'Peonies',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png',
),
bubbles(
'Bubbles',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png',
),
seaweed(
'Seaweed',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_4.png',
),
seagrapes(
'Sea Grapes',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_5.png',
),
petals(
'Petals',
'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_6.png',
);
const ColorImageProvider(this.label, this.url);
final String label;
final String url;
}
enum ScreenSelected {
component(0),
color(1),
typography(2),
elevation(3);
const ScreenSelected(this.value);
final int value;
}

195
material_3_demo/lib/src/elevation_screen.dart Normal file
View File

@@ -0,0 +1,195 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class ElevationScreen extends StatelessWidget {
const ElevationScreen({super.key});
@override
Widget build(BuildContext context) {
Color shadowColor = Theme.of(context).colorScheme.shadow;
Color surfaceTint = Theme.of(context).colorScheme.primary;
return Expanded(
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.fromLTRB(16.0, 20, 16.0, 0),
child: Text(
'Surface Tint Color Only',
style: Theme.of(context).textTheme.titleLarge,
),
),
),
ElevationGrid(
surfaceTintColor: surfaceTint,
shadowColor: Colors.transparent,
),
SliverList(
delegate: SliverChildListDelegate(<Widget>[
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
child: Text(
'Surface Tint Color and Shadow Color',
style: Theme.of(context).textTheme.titleLarge,
),
),
]),
),
ElevationGrid(
shadowColor: shadowColor,
surfaceTintColor: surfaceTint,
),
SliverList(
delegate: SliverChildListDelegate(<Widget>[
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
child: Text(
'Shadow Color Only',
style: Theme.of(context).textTheme.titleLarge,
),
),
]),
),
ElevationGrid(shadowColor: shadowColor),
],
),
);
}
}
const double narrowScreenWidthThreshold = 450;
class ElevationGrid extends StatelessWidget {
const ElevationGrid({super.key, this.shadowColor, this.surfaceTintColor});
final Color? shadowColor;
final Color? surfaceTintColor;
List<ElevationCard> elevationCards(
Color? shadowColor,
Color? surfaceTintColor,
) {
return elevations
.map(
(elevationInfo) => ElevationCard(
info: elevationInfo,
shadowColor: shadowColor,
surfaceTint: surfaceTintColor,
),
)
.toList();
}
@override
Widget build(BuildContext context) {
return SliverPadding(
padding: const EdgeInsets.all(8),
sliver: SliverLayoutBuilder(
builder: (context, constraints) {
if (constraints.crossAxisExtent < narrowScreenWidthThreshold) {
return SliverGrid.count(
crossAxisCount: 3,
children: elevationCards(shadowColor, surfaceTintColor),
);
} else {
return SliverGrid.count(
crossAxisCount: 6,
children: elevationCards(shadowColor, surfaceTintColor),
);
}
},
),
);
}
}
class ElevationCard extends StatefulWidget {
const ElevationCard({
super.key,
required this.info,
this.shadowColor,
this.surfaceTint,
});
final ElevationInfo info;
final Color? shadowColor;
final Color? surfaceTint;
@override
State<ElevationCard> createState() => _ElevationCardState();
}
class _ElevationCardState extends State<ElevationCard> {
late double _elevation;
@override
void initState() {
super.initState();
_elevation = widget.info.elevation;
}
@override
Widget build(BuildContext context) {
const BorderRadius borderRadius = BorderRadius.all(Radius.circular(4.0));
final Color color = Theme.of(context).colorScheme.surface;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
borderRadius: borderRadius,
elevation: _elevation,
color: color,
shadowColor: widget.shadowColor,
surfaceTintColor: widget.surfaceTint,
type: MaterialType.card,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Level ${widget.info.level}',
style: Theme.of(context).textTheme.labelMedium,
),
Text(
'${widget.info.elevation.toInt()} dp',
style: Theme.of(context).textTheme.labelMedium,
),
if (widget.surfaceTint != null)
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: Text(
'${widget.info.overlayPercent}%',
style: Theme.of(context).textTheme.bodySmall,
),
),
),
],
),
),
),
);
}
}
class ElevationInfo {
const ElevationInfo(this.level, this.elevation, this.overlayPercent);
final int level;
final double elevation;
final int overlayPercent;
}
const List<ElevationInfo> elevations = <ElevationInfo>[
ElevationInfo(0, 0.0, 0),
ElevationInfo(1, 1.0, 5),
ElevationInfo(2, 3.0, 8),
ElevationInfo(3, 6.0, 11),
ElevationInfo(4, 8.0, 12),
ElevationInfo(5, 12.0, 14),
];

45
material_3_demo/lib/src/expanded_color_seed_action.dart Normal file
View File

@@ -0,0 +1,45 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class ExpandedColorSeedAction extends StatelessWidget {
const ExpandedColorSeedAction({
super.key,
required this.handleColorSelect,
required this.colorSelected,
required this.colorSelectionMethod,
});
final void Function(int) handleColorSelect;
final ColorSeed colorSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200.0),
child: GridView.count(
crossAxisCount: 3,
children: List.generate(
ColorSeed.values.length,
(i) => IconButton(
icon: const Icon(Icons.radio_button_unchecked),
color: ColorSeed.values[i].color,
isSelected:
colorSelected.color == ColorSeed.values[i].color &&
colorSelectionMethod == ColorSelectionMethod.colorSeed,
selectedIcon: const Icon(Icons.circle),
onPressed: () {
handleColorSelect(i);
},
tooltip: ColorSeed.values[i].label,
),
),
),
);
}
}

78
material_3_demo/lib/src/expanded_image_color_action.dart Normal file
View File

@@ -0,0 +1,78 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class ExpandedImageColorAction extends StatelessWidget {
const ExpandedImageColorAction({
super.key,
required this.handleImageSelect,
required this.imageSelected,
required this.colorSelectionMethod,
});
final void Function(int) handleImageSelect;
final ColorImageProvider imageSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 150.0),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: GridView.count(
crossAxisCount: 3,
children: List.generate(
ColorImageProvider.values.length,
(i) => _ImageButton(
index: i,
select:
imageSelected == ColorImageProvider.values[i] &&
colorSelectionMethod == ColorSelectionMethod.image
? null
: () => handleImageSelect(i),
),
),
),
),
);
}
}
class _ImageButton extends StatelessWidget {
const _ImageButton({required this.index, required this.select});
final void Function()? select;
final int index;
@override
Widget build(BuildContext context) {
return Tooltip(
message: ColorImageProvider.values[index].name,
child: InkWell(
borderRadius: BorderRadius.circular(4.0),
onTap: select,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
borderRadius: BorderRadius.circular(4.0),
elevation: select != null ? 3 : 0,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Image(
image: NetworkImage(ColorImageProvider.values[index].url),
),
),
),
),
),
),
);
}
}

92
material_3_demo/lib/src/expanded_trailing_actions.dart Normal file
View File

@@ -0,0 +1,92 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
import 'expanded_color_seed_action.dart';
import 'expanded_image_color_action.dart';
class ExpandedTrailingActions extends StatelessWidget {
const ExpandedTrailingActions({
super.key,
required this.useLightMode,
required this.handleBrightnessChange,
required this.useMaterial3,
required this.handleMaterialVersionChange,
required this.handleColorSelect,
required this.handleImageSelect,
required this.imageSelected,
required this.colorSelected,
required this.colorSelectionMethod,
});
final void Function(bool) handleBrightnessChange;
final void Function() handleMaterialVersionChange;
final void Function(int) handleImageSelect;
final void Function(int) handleColorSelect;
final bool useLightMode;
final bool useMaterial3;
final ColorImageProvider imageSelected;
final ColorSeed colorSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
final trailingActionsBody = Container(
constraints: const BoxConstraints.tightFor(width: 250),
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
const Text('Brightness'),
Expanded(child: Container()),
Switch(
value: useLightMode,
onChanged: (value) {
handleBrightnessChange(value);
},
),
],
),
Row(
children: [
useMaterial3
? const Text('Material 3')
: const Text('Material 2'),
Expanded(child: Container()),
Switch(
value: useMaterial3,
onChanged: (_) {
handleMaterialVersionChange();
},
),
],
),
const Divider(),
ExpandedColorSeedAction(
handleColorSelect: handleColorSelect,
colorSelected: colorSelected,
colorSelectionMethod: colorSelectionMethod,
),
const Divider(),
ExpandedImageColorAction(
handleImageSelect: handleImageSelect,
imageSelected: imageSelected,
colorSelectionMethod: colorSelectionMethod,
),
],
),
);
return screenHeight > 740
? trailingActionsBody
: SingleChildScrollView(child: trailingActionsBody);
}
}

269
material_3_demo/lib/src/home.dart Normal file
View File

@@ -0,0 +1,269 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'buttons.dart';
import 'color_palettes_screen.dart';
import 'component_screen.dart';
import 'constants.dart';
import 'elevation_screen.dart';
import 'expanded_trailing_actions.dart';
import 'navigation_transition.dart';
import 'one_two_transition.dart';
import 'typography_screen.dart';
class Home extends StatefulWidget {
const Home({
super.key,
required this.useLightMode,
required this.useMaterial3,
required this.colorSelected,
required this.handleBrightnessChange,
required this.handleMaterialVersionChange,
required this.handleColorSelect,
required this.handleImageSelect,
required this.colorSelectionMethod,
required this.imageSelected,
});
final bool useLightMode;
final bool useMaterial3;
final ColorSeed colorSelected;
final ColorImageProvider imageSelected;
final ColorSelectionMethod colorSelectionMethod;
final void Function(bool useLightMode) handleBrightnessChange;
final void Function() handleMaterialVersionChange;
final void Function(int value) handleColorSelect;
final void Function(int value) handleImageSelect;
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
late final AnimationController controller;
late final CurvedAnimation railAnimation;
bool controllerInitialized = false;
bool showMediumSizeLayout = false;
bool showLargeSizeLayout = false;
int screenIndex = ScreenSelected.component.value;
@override
initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: transitionLength.toInt() * 2),
value: 0,
vsync: this,
);
railAnimation = CurvedAnimation(
parent: controller,
curve: const Interval(0.5, 1.0),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
final double width = MediaQuery.of(context).size.width;
final AnimationStatus status = controller.status;
if (width > mediumWidthBreakpoint) {
if (width > largeWidthBreakpoint) {
showMediumSizeLayout = false;
showLargeSizeLayout = true;
} else {
showMediumSizeLayout = true;
showLargeSizeLayout = false;
}
if (status != AnimationStatus.forward &&
status != AnimationStatus.completed) {
controller.forward();
}
} else {
showMediumSizeLayout = false;
showLargeSizeLayout = false;
if (status != AnimationStatus.reverse &&
status != AnimationStatus.dismissed) {
controller.reverse();
}
}
if (!controllerInitialized) {
controllerInitialized = true;
controller.value = width > mediumWidthBreakpoint ? 1 : 0;
}
}
void handleScreenChanged(int screenSelected) {
setState(() {
screenIndex = screenSelected;
});
}
Widget createScreenFor(
ScreenSelected screenSelected,
bool showNavBarExample,
) => switch (screenSelected) {
ScreenSelected.component => Expanded(
child: OneTwoTransition(
animation: railAnimation,
one: FirstComponentList(
showNavBottomBar: showNavBarExample,
scaffoldKey: scaffoldKey,
showSecondList: showMediumSizeLayout || showLargeSizeLayout,
),
two: SecondComponentList(scaffoldKey: scaffoldKey),
),
),
ScreenSelected.color => const ColorPalettesScreen(),
ScreenSelected.typography => const TypographyScreen(),
ScreenSelected.elevation => const ElevationScreen(),
};
PreferredSizeWidget _createAppBar() {
return AppBar(
title:
widget.useMaterial3
? const Text('Material 3')
: const Text('Material 2'),
actions:
!showMediumSizeLayout && !showLargeSizeLayout
? [
BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
),
Material3Button(
handleMaterialVersionChange:
widget.handleMaterialVersionChange,
),
ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
]
: [Container()],
);
}
Widget _trailingActions() => Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
showTooltipBelow: false,
),
),
Flexible(
child: Material3Button(
handleMaterialVersionChange: widget.handleMaterialVersionChange,
showTooltipBelow: false,
),
),
Flexible(
child: ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
Flexible(
child: ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
],
);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return NavigationTransition(
scaffoldKey: scaffoldKey,
animationController: controller,
railAnimation: railAnimation,
appBar: _createAppBar(),
body: createScreenFor(
ScreenSelected.values[screenIndex],
controller.value == 1,
),
navigationRail: NavigationRail(
extended: showLargeSizeLayout,
destinations: _navRailDestinations,
selectedIndex: screenIndex,
onDestinationSelected: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
trailing: Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child:
showLargeSizeLayout
? ExpandedTrailingActions(
useLightMode: widget.useLightMode,
handleBrightnessChange: widget.handleBrightnessChange,
useMaterial3: widget.useMaterial3,
handleMaterialVersionChange:
widget.handleMaterialVersionChange,
handleImageSelect: widget.handleImageSelect,
handleColorSelect: widget.handleColorSelect,
colorSelectionMethod: widget.colorSelectionMethod,
imageSelected: widget.imageSelected,
colorSelected: widget.colorSelected,
)
: _trailingActions(),
),
),
),
navigationBar: NavigationBars(
onSelectItem: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
selectedIndex: screenIndex,
isExampleBar: false,
),
);
},
);
}
}
final List<NavigationRailDestination> _navRailDestinations = appBarDestinations
.map(
(destination) => NavigationRailDestination(
icon: Tooltip(message: destination.label, child: destination.icon),
selectedIcon: Tooltip(
message: destination.label,
child: destination.selectedIcon,
),
label: Text(destination.label),
),
)
.toList(growable: false);

79
material_3_demo/lib/src/navigation_transition.dart Normal file
View File

@@ -0,0 +1,79 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'bar_transition.dart';
import 'component_screen.dart';
import 'rail_transition.dart';
class NavigationTransition extends StatefulWidget {
const NavigationTransition({
super.key,
required this.scaffoldKey,
required this.animationController,
required this.railAnimation,
required this.navigationRail,
required this.navigationBar,
required this.appBar,
required this.body,
});
final GlobalKey<ScaffoldState> scaffoldKey;
final AnimationController animationController;
final CurvedAnimation railAnimation;
final Widget navigationRail;
final Widget navigationBar;
final PreferredSizeWidget appBar;
final Widget body;
@override
State<NavigationTransition> createState() => _NavigationTransitionState();
}
class _NavigationTransitionState extends State<NavigationTransition> {
late final AnimationController controller;
late final CurvedAnimation railAnimation;
late final ReverseAnimation barAnimation;
bool controllerInitialized = false;
bool showDivider = false;
@override
void initState() {
super.initState();
controller = widget.animationController;
railAnimation = widget.railAnimation;
barAnimation = ReverseAnimation(
CurvedAnimation(parent: controller, curve: const Interval(0.0, 0.5)),
);
}
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
return Scaffold(
key: widget.scaffoldKey,
appBar: widget.appBar,
body: Row(
children: <Widget>[
RailTransition(
animation: railAnimation,
backgroundColor: colorScheme.surface,
child: widget.navigationRail,
),
widget.body,
],
),
bottomNavigationBar: BarTransition(
animation: barAnimation,
backgroundColor: colorScheme.surface,
child: widget.navigationBar,
),
endDrawer: const NavigationDrawerSection(),
);
}
}

62
material_3_demo/lib/src/one_two_transition.dart Normal file
View File

@@ -0,0 +1,62 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'animations.dart';
import 'constants.dart';
class OneTwoTransition extends StatefulWidget {
const OneTwoTransition({
super.key,
required this.animation,
required this.one,
required this.two,
});
final Animation<double> animation;
final Widget one;
final Widget two;
@override
State<OneTwoTransition> createState() => _OneTwoTransitionState();
}
class _OneTwoTransitionState extends State<OneTwoTransition> {
late final Animation<Offset> offsetAnimation;
late final Animation<double> widthAnimation;
@override
void initState() {
super.initState();
offsetAnimation = Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(OffsetAnimation(widget.animation));
widthAnimation = Tween<double>(
begin: 0,
end: mediumWidthBreakpoint,
).animate(SizeAnimation(widget.animation));
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Flexible(flex: mediumWidthBreakpoint.toInt(), child: widget.one),
if (widthAnimation.value.toInt() > 0) ...[
Flexible(
flex: widthAnimation.value.toInt(),
child: FractionalTranslation(
translation: offsetAnimation.value,
child: widget.two,
),
),
],
],
);
}
}

64
material_3_demo/lib/src/rail_transition.dart Normal file
View File

@@ -0,0 +1,64 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/widgets.dart';
import 'animations.dart';
class RailTransition extends StatefulWidget {
const RailTransition({
super.key,
required this.animation,
required this.backgroundColor,
required this.child,
});
final Animation<double> animation;
final Widget child;
final Color backgroundColor;
@override
State<RailTransition> createState() => _RailTransition();
}
class _RailTransition extends State<RailTransition> {
late Animation<Offset> offsetAnimation;
late Animation<double> widthAnimation;
@override
void didChangeDependencies() {
super.didChangeDependencies();
// The animations are only rebuilt by this method when the text
// direction changes because this widget only depends on Directionality.
final bool ltr = Directionality.of(context) == TextDirection.ltr;
widthAnimation = Tween<double>(
begin: 0,
end: 1,
).animate(SizeAnimation(widget.animation));
offsetAnimation = Tween<Offset>(
begin: ltr ? const Offset(-1, 0) : const Offset(1, 0),
end: Offset.zero,
).animate(OffsetAnimation(widget.animation));
}
@override
Widget build(BuildContext context) {
return ClipRect(
child: DecoratedBox(
decoration: BoxDecoration(color: widget.backgroundColor),
child: Align(
alignment: Alignment.topLeft,
widthFactor: widthAnimation.value,
child: FractionalTranslation(
translation: offsetAnimation.value,
child: widget.child,
),
),
),
);
}
}

418
material_3_demo/lib/src/scheme.dart Normal file
View File

@@ -0,0 +1,418 @@
// Copyright 2024 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'color_box.dart';
class SchemePreview extends StatefulWidget {
const SchemePreview({
super.key,
required this.label,
required this.scheme,
required this.brightness,
required this.colorMatch,
required this.contrast,
});
final String label;
final ColorScheme scheme;
final Brightness brightness;
final bool colorMatch;
final double contrast;
@override
State<SchemePreview> createState() => _SchemePreviewState();
}
class _SchemePreviewState extends State<SchemePreview> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final fonts = theme.textTheme;
final colors = theme.colorScheme;
final dark = widget.brightness == Brightness.dark;
final scheme = widget.scheme;
return Theme(
data: theme.copyWith(colorScheme: scheme),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Container(
width: 902,
decoration: BoxDecoration(
color: scheme.surface,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color:
theme.brightness == widget.brightness
? colors.outlineVariant
: Colors.transparent,
),
),
padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
widget.label,
style: fonts.titleMedium!.copyWith(
color: scheme.onSurface,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.start,
),
),
],
),
const SizedBox(height: 20),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Primary',
tone: dark ? 'P-80' : 'P-40',
color: scheme.primary,
onColor: scheme.onPrimary,
height: 87,
width: 208,
),
ColorBox(
label: 'On Primary',
tone: dark ? 'P-20' : 'P-100',
color: scheme.onPrimary,
onColor: scheme.primary,
height: 40,
width: 208,
),
const SizedBox(height: 5),
ColorBox(
label: 'Primary Container',
tone: dark ? 'P-30' : 'P-90',
color: scheme.primaryContainer,
onColor: scheme.onPrimaryContainer,
height: 87,
width: 208,
),
ColorBox(
label: 'On Primary Container',
tone: dark ? 'P-90' : 'P-10',
color: scheme.onPrimaryContainer,
onColor: scheme.primaryContainer,
height: 40,
width: 208,
),
],
),
const SizedBox(width: 5),
Column(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Secondary',
tone: dark ? 'S-80' : 'S-40',
color: scheme.secondary,
onColor: scheme.onSecondary,
height: 87,
width: 208,
),
ColorBox(
label: 'On Secondary',
tone: dark ? 'S-20' : 'S-100',
color: scheme.onSecondary,
onColor: scheme.secondary,
height: 40,
width: 208,
),
const SizedBox(height: 5),
ColorBox(
label: 'Secondary Container',
tone: dark ? 'S-30' : 'S-90',
color: scheme.secondaryContainer,
onColor: scheme.onSecondaryContainer,
height: 87,
width: 208,
),
ColorBox(
label: 'On Secondary Container',
tone: dark ? 'S-90' : 'S-10',
color: scheme.onSecondaryContainer,
onColor: scheme.secondaryContainer,
height: 40,
width: 208,
),
],
),
const SizedBox(width: 5),
Column(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Tertiary',
tone: dark ? 'T-80' : 'T-40',
color: scheme.tertiary,
onColor: scheme.onTertiary,
height: 87,
width: 208,
),
ColorBox(
label: 'On Tertiary',
tone: dark ? 'T-20' : 'T-100',
color: scheme.onTertiary,
onColor: scheme.tertiary,
height: 40,
width: 208,
),
const SizedBox(height: 5),
ColorBox(
label: 'Tertiary Container',
tone: dark ? 'T-30' : 'T-90',
color: scheme.tertiaryContainer,
onColor: scheme.onTertiaryContainer,
height: 87,
width: 208,
),
ColorBox(
label: 'On Tertiary Container',
tone: dark ? 'T-90' : 'T-10',
color: scheme.onTertiaryContainer,
onColor: scheme.tertiaryContainer,
height: 40,
width: 208,
),
],
),
],
),
const SizedBox(height: 20),
Row(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Surface Dim',
tone: dark ? 'N-6' : 'N-87',
color: scheme.surfaceDim,
onColor: scheme.onSurface,
height: 105,
width: 211.45,
),
ColorBox(
label: 'Surface',
tone: dark ? 'N-6' : 'N-98',
color: scheme.surface,
onColor: scheme.onSurface,
height: 105,
width: 211.45,
),
ColorBox(
label: 'Surface Bright',
tone: dark ? 'N-24' : 'N-98',
color: scheme.surfaceBright,
onColor: scheme.onSurface,
height: 105,
width: 211.45,
),
],
),
const SizedBox(height: 5),
Row(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Surf. Container\nLowest',
tone: dark ? 'N-4' : 'N-100',
color: scheme.surfaceContainerLowest,
onColor: scheme.onSurface,
height: 105,
width: 126.87,
),
ColorBox(
label: 'Surf. Container\nLow',
tone: dark ? 'N-10' : 'N-96',
color: scheme.surfaceContainerLow,
onColor: scheme.onSurface,
height: 105,
width: 126.87,
),
ColorBox(
label: 'Surf. Container',
tone: dark ? 'N-12' : 'N-94',
color: scheme.surfaceContainer,
onColor: scheme.onSurface,
height: 105,
width: 126.87,
),
ColorBox(
label: 'Surf. Container\nHigh',
tone: dark ? 'N-17' : 'N-92',
color: scheme.surfaceContainerHigh,
onColor: scheme.onSurface,
height: 105,
width: 126.87,
),
ColorBox(
label: 'Surf. Container\nHighest',
tone: dark ? 'N-24' : 'N-90',
color: scheme.surfaceContainerHighest,
onColor: scheme.onSurface,
height: 105,
width: 126.87,
),
],
),
const SizedBox(height: 5),
Row(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'On Surface',
tone: dark ? 'N-90' : 'N-10',
color: scheme.onSurface,
onColor: scheme.surface,
height: 40,
width: 158.59,
),
ColorBox(
label: 'On Surface Var.',
tone: dark ? 'NV-90' : 'NV-30',
color: scheme.onSurfaceVariant,
onColor: scheme.surfaceContainerHighest,
height: 40,
width: 158.59,
),
ColorBox(
label: 'Outline',
tone: dark ? 'NV-60' : 'NV-50',
color: scheme.outline,
onColor: scheme.surface,
height: 40,
width: 158.59,
),
ColorBox(
label: 'Outline Variant',
tone: dark ? 'NV-30' : 'NV-80',
color: scheme.outlineVariant,
onColor: scheme.onSurface,
height: 40,
width: 158.59,
),
],
),
],
),
const SizedBox(width: 20),
Column(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Error',
tone: dark ? 'E-80' : 'E-40',
color: scheme.error,
onColor: scheme.onError,
height: 87,
width: 208,
),
ColorBox(
label: 'On Error',
tone: dark ? 'E-20' : 'E-100',
color: scheme.onError,
onColor: scheme.error,
height: 40,
width: 208,
),
const SizedBox(height: 5),
ColorBox(
label: 'Error Container',
tone: dark ? 'E-30' : 'E-90',
color: scheme.errorContainer,
onColor: scheme.onErrorContainer,
height: 87,
width: 208,
),
ColorBox(
label: 'On Error Container',
tone: dark ? 'E-90' : 'E-10',
color: scheme.onErrorContainer,
onColor: scheme.errorContainer,
height: 40,
width: 208,
),
const SizedBox(height: 20),
ColorBox(
label: 'Inverse Surface',
tone: dark ? 'N-90' : 'N-20',
color: scheme.inverseSurface,
onColor: scheme.onInverseSurface,
height: 120,
width: 208,
),
ColorBox(
label: 'Inverse On Surface',
tone: dark ? 'N-20' : 'N-95',
color: scheme.onInverseSurface,
onColor: scheme.inverseSurface,
height: 40,
width: 208,
),
const SizedBox(height: 5),
ColorBox(
label: 'Inverse Primary',
tone: dark ? 'P-40' : 'P-80',
color: scheme.inversePrimary,
onColor: scheme.onSurface,
height: 40,
width: 208,
),
const SizedBox(height: 16),
Row(
mainAxisSize: MainAxisSize.min,
children: [
ColorBox(
label: 'Scrim',
tone: 'N-0',
color: scheme.scrim,
onColor: Colors.white,
height: 40,
width: 96.31,
),
const SizedBox(width: 20),
ColorBox(
label: 'Shadow',
tone: 'N-0',
color: scheme.shadow,
onColor: Colors.white,
height: 40,
width: 96.31,
),
],
),
const SizedBox(height: 8),
],
),
],
),
],
),
),
),
);
}
}

71
material_3_demo/lib/src/typography_screen.dart Normal file
View File

@@ -0,0 +1,71 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class TypographyScreen extends StatelessWidget {
const TypographyScreen({super.key});
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(
context,
).textTheme.apply(displayColor: Theme.of(context).colorScheme.onSurface);
return Expanded(
child: ListView(
children: <Widget>[
const SizedBox(height: 8),
TextStyleExample(
name: 'Display Large',
style: textTheme.displayLarge!,
),
TextStyleExample(
name: 'Display Medium',
style: textTheme.displayMedium!,
),
TextStyleExample(
name: 'Display Small',
style: textTheme.displaySmall!,
),
TextStyleExample(
name: 'Headline Large',
style: textTheme.headlineLarge!,
),
TextStyleExample(
name: 'Headline Medium',
style: textTheme.headlineMedium!,
),
TextStyleExample(
name: 'Headline Small',
style: textTheme.headlineSmall!,
),
TextStyleExample(name: 'Title Large', style: textTheme.titleLarge!),
TextStyleExample(name: 'Title Medium', style: textTheme.titleMedium!),
TextStyleExample(name: 'Title Small', style: textTheme.titleSmall!),
TextStyleExample(name: 'Label Large', style: textTheme.labelLarge!),
TextStyleExample(name: 'Label Medium', style: textTheme.labelMedium!),
TextStyleExample(name: 'Label Small', style: textTheme.labelSmall!),
TextStyleExample(name: 'Body Large', style: textTheme.bodyLarge!),
TextStyleExample(name: 'Body Medium', style: textTheme.bodyMedium!),
TextStyleExample(name: 'Body Small', style: textTheme.bodySmall!),
],
),
);
}
}
class TextStyleExample extends StatelessWidget {
const TextStyleExample({super.key, required this.name, required this.style});
final String name;
final TextStyle style;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Text(name, style: style),
);
}
}