material desing init with example
This commit is contained in:
339
lib/color_palettes_screen.dart
Normal file
339
lib/color_palettes_screen.dart
Normal file
@@ -0,0 +1,339 @@
|
|||||||
|
// 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';
|
||||||
|
|
||||||
|
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 = 400;
|
||||||
|
|
||||||
|
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 {
|
||||||
|
return SingleChildScrollView(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 5),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
dynamicColorNotice(),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
schemeLabel('Light ColorScheme'),
|
||||||
|
schemeView(lightTheme),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
schemeLabel('Dark ColorScheme'),
|
||||||
|
schemeView(darkTheme),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class ColorSchemeView extends StatelessWidget {
|
||||||
|
const ColorSchemeView({super.key, required this.colorScheme});
|
||||||
|
|
||||||
|
final ColorScheme colorScheme;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Column(
|
||||||
|
children: [
|
||||||
|
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: '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: '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: '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: 'background',
|
||||||
|
color: colorScheme.background,
|
||||||
|
onColor: colorScheme.onBackground),
|
||||||
|
ColorChip(
|
||||||
|
label: 'onBackground',
|
||||||
|
color: colorScheme.onBackground,
|
||||||
|
onColor: colorScheme.background),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
divider,
|
||||||
|
ColorGroup(
|
||||||
|
children: [
|
||||||
|
ColorChip(
|
||||||
|
label: 'surface',
|
||||||
|
color: colorScheme.surface,
|
||||||
|
onColor: colorScheme.onSurface),
|
||||||
|
ColorChip(
|
||||||
|
label: 'onSurface',
|
||||||
|
color: colorScheme.onSurface,
|
||||||
|
onColor: colorScheme.surface),
|
||||||
|
ColorChip(
|
||||||
|
label: 'surfaceVariant',
|
||||||
|
color: colorScheme.surfaceVariant,
|
||||||
|
onColor: colorScheme.onSurfaceVariant),
|
||||||
|
ColorChip(
|
||||||
|
label: 'onSurfaceVariant',
|
||||||
|
color: colorScheme.onSurfaceVariant,
|
||||||
|
onColor: colorScheme.surfaceVariant),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
divider,
|
||||||
|
ColorGroup(
|
||||||
|
children: [
|
||||||
|
ColorChip(label: 'outline', color: colorScheme.outline),
|
||||||
|
ColorChip(label: 'shadow', color: colorScheme.shadow),
|
||||||
|
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<Widget> 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) {
|
||||||
|
final brightness = ThemeData.estimateBrightnessForColor(color);
|
||||||
|
switch (brightness) {
|
||||||
|
case Brightness.dark:
|
||||||
|
return Colors.white;
|
||||||
|
case Brightness.light:
|
||||||
|
return 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))),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
2554
lib/component_screen.dart
Normal file
2554
lib/component_screen.dart
Normal file
File diff suppressed because it is too large
Load Diff
67
lib/constants.dart
Normal file
67
lib/constants.dart
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
// 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),
|
||||||
|
home(4);
|
||||||
|
|
||||||
|
const ScreenSelected(this.value);
|
||||||
|
final int value;
|
||||||
|
}
|
||||||
187
lib/elevation_screen.dart
Normal file
187
lib/elevation_screen.dart
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
// 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),
|
||||||
|
];
|
||||||
877
lib/home.dart
Normal file
877
lib/home.dart
Normal file
@@ -0,0 +1,877 @@
|
|||||||
|
// 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 'color_palettes_screen.dart';
|
||||||
|
import 'component_screen.dart';
|
||||||
|
import 'constants.dart';
|
||||||
|
import 'elevation_screen.dart';
|
||||||
|
import 'typography_screen.dart';
|
||||||
|
import 'pages/home_page.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) {
|
||||||
|
case ScreenSelected.component:
|
||||||
|
return Expanded(
|
||||||
|
child: OneTwoTransition(
|
||||||
|
animation: railAnimation,
|
||||||
|
one: FirstComponentList(
|
||||||
|
showNavBottomBar: showNavBarExample,
|
||||||
|
scaffoldKey: scaffoldKey,
|
||||||
|
showSecondList: showMediumSizeLayout || showLargeSizeLayout),
|
||||||
|
two: SecondComponentList(
|
||||||
|
scaffoldKey: scaffoldKey,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
case ScreenSelected.color:
|
||||||
|
return const ColorPalettesScreen();
|
||||||
|
case ScreenSelected.typography:
|
||||||
|
return const TypographyScreen();
|
||||||
|
case ScreenSelected.elevation:
|
||||||
|
return const ElevationScreen();
|
||||||
|
case ScreenSelected.home:
|
||||||
|
return const HomePage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _BrightnessButton extends StatelessWidget {
|
||||||
|
const _BrightnessButton({
|
||||||
|
required this.handleBrightnessChange,
|
||||||
|
this.showTooltipBelow = true,
|
||||||
|
});
|
||||||
|
|
||||||
|
final Function 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({
|
||||||
|
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({
|
||||||
|
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: Icon(
|
||||||
|
Icons.palette_outlined,
|
||||||
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||||
|
),
|
||||||
|
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({
|
||||||
|
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: Icon(
|
||||||
|
Icons.image_outlined,
|
||||||
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||||
|
),
|
||||||
|
tooltip: 'Select a color extraction image',
|
||||||
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||||
|
itemBuilder: (context) {
|
||||||
|
return List.generate(ColorImageProvider.values.length, (index) {
|
||||||
|
ColorImageProvider 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(
|
||||||
|
ColorImageProvider.values[index].url),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(left: 20),
|
||||||
|
child: Text(currentImageProvider.label),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSelected: handleImageSelect,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ExpandedTrailingActions extends StatelessWidget {
|
||||||
|
const _ExpandedTrailingActions({
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ExpandedColorSeedAction extends StatelessWidget {
|
||||||
|
const _ExpandedColorSeedAction({
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ExpandedImageColorAction extends StatelessWidget {
|
||||||
|
const _ExpandedImageColorAction({
|
||||||
|
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) => Tooltip(
|
||||||
|
message: ColorImageProvider.values[i].name,
|
||||||
|
child: InkWell(
|
||||||
|
borderRadius: BorderRadius.circular(4.0),
|
||||||
|
onTap: () => handleImageSelect(i),
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(8.0),
|
||||||
|
child: Material(
|
||||||
|
borderRadius: BorderRadius.circular(4.0),
|
||||||
|
elevation: imageSelected == ColorImageProvider.values[i] &&
|
||||||
|
colorSelectionMethod == ColorSelectionMethod.image
|
||||||
|
? 3
|
||||||
|
: 0,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(4.0),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(4.0),
|
||||||
|
child: Image(
|
||||||
|
image: NetworkImage(ColorImageProvider.values[i].url),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
128
lib/main.dart
128
lib/main.dart
@@ -1,44 +1,110 @@
|
|||||||
|
// 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 'package:flutter/material.dart';
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'pages/welcome_page.dart';
|
import 'constants.dart';
|
||||||
import 'pages/home_page.dart';
|
import 'home.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
runApp(const MyApp());
|
runApp(
|
||||||
|
const App(),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
class MyApp extends StatelessWidget {
|
class App extends StatefulWidget {
|
||||||
const MyApp({super.key});
|
const App({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<App> createState() => _AppState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AppState extends State<App> {
|
||||||
|
bool useMaterial3 = true;
|
||||||
|
ThemeMode themeMode = ThemeMode.system;
|
||||||
|
ColorSeed colorSelected = ColorSeed.baseColor;
|
||||||
|
ColorImageProvider imageSelected = ColorImageProvider.leaves;
|
||||||
|
ColorScheme? imageColorScheme = const ColorScheme.light();
|
||||||
|
ColorSelectionMethod colorSelectionMethod = ColorSelectionMethod.colorSeed;
|
||||||
|
|
||||||
|
bool get useLightMode {
|
||||||
|
switch (themeMode) {
|
||||||
|
case ThemeMode.system:
|
||||||
|
return View.of(context).platformDispatcher.platformBrightness ==
|
||||||
|
Brightness.light;
|
||||||
|
case ThemeMode.light:
|
||||||
|
return true;
|
||||||
|
case ThemeMode.dark:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void handleBrightnessChange(bool useLightMode) {
|
||||||
|
setState(() {
|
||||||
|
themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void handleMaterialVersionChange() {
|
||||||
|
setState(() {
|
||||||
|
useMaterial3 = !useMaterial3;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void handleColorSelect(int value) {
|
||||||
|
setState(() {
|
||||||
|
colorSelectionMethod = ColorSelectionMethod.colorSeed;
|
||||||
|
colorSelected = ColorSeed.values[value];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void handleImageSelect(int value) {
|
||||||
|
final String url = ColorImageProvider.values[value].url;
|
||||||
|
ColorScheme.fromImageProvider(provider: NetworkImage(url))
|
||||||
|
.then((newScheme) {
|
||||||
|
setState(() {
|
||||||
|
colorSelectionMethod = ColorSelectionMethod.image;
|
||||||
|
imageSelected = ColorImageProvider.values[value];
|
||||||
|
imageColorScheme = newScheme;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// This widget is the root of your application.
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return MaterialApp(
|
return MaterialApp(
|
||||||
title: 'Flutter Demo',
|
debugShowCheckedModeBanner: false,
|
||||||
|
title: 'Material 3',
|
||||||
|
themeMode: themeMode,
|
||||||
theme: ThemeData(
|
theme: ThemeData(
|
||||||
primaryColor: Colors.red,
|
colorSchemeSeed: colorSelectionMethod == ColorSelectionMethod.colorSeed
|
||||||
accentCoulor: Colors.blue,
|
? colorSelected.color
|
||||||
fontFamily: 'Roboto',
|
: null,
|
||||||
textTheme: TextTheme(
|
colorScheme: colorSelectionMethod == ColorSelectionMethod.image
|
||||||
headline1: TextStyle(fontSize: 24),
|
? imageColorScheme
|
||||||
headline2: TextStyle(fontSize: 20),
|
: null,
|
||||||
headline3: TextStyle(fontSize: 16),
|
useMaterial3: useMaterial3,
|
||||||
)),
|
brightness: Brightness.light,
|
||||||
// Cambia la proprietà `home` con `WelcomePage()`
|
),
|
||||||
home: WelcomePage(),
|
darkTheme: ThemeData(
|
||||||
// Aggiungi un nuovo `onGenerateRoute`
|
colorSchemeSeed: colorSelectionMethod == ColorSelectionMethod.colorSeed
|
||||||
onGenerateRoute: (settings) {
|
? colorSelected.color
|
||||||
// Se la route è `/home`, esci dal `WelcomePage()` e vai alla `HomePage()`
|
: imageColorScheme!.primary,
|
||||||
if (settings.name == '/home') {
|
useMaterial3: useMaterial3,
|
||||||
Navigator.pop(context);
|
brightness: Brightness.dark,
|
||||||
return MaterialPageRoute(
|
),
|
||||||
builder: (context) => const HomePage(
|
home: Home(
|
||||||
title: 'Titolo',
|
useLightMode: useLightMode,
|
||||||
));
|
useMaterial3: useMaterial3,
|
||||||
}
|
colorSelected: colorSelected,
|
||||||
// Altrimenti, restituisci la route predefinita
|
imageSelected: imageSelected,
|
||||||
return MaterialPageRoute(builder: (context) => WelcomePage());
|
handleBrightnessChange: handleBrightnessChange,
|
||||||
},
|
handleMaterialVersionChange: handleMaterialVersionChange,
|
||||||
|
handleColorSelect: handleColorSelect,
|
||||||
|
handleImageSelect: handleImageSelect,
|
||||||
|
colorSelectionMethod: colorSelectionMethod,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
45
lib/old/main.dart
Normal file
45
lib/old/main.dart
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
/*
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import '../pages/welcome_page.dart';
|
||||||
|
import '../pages/home_page.dart';
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
runApp(const MyApp());
|
||||||
|
}
|
||||||
|
|
||||||
|
class MyApp extends StatelessWidget {
|
||||||
|
const MyApp({super.key});
|
||||||
|
|
||||||
|
// This widget is the root of your application.
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return MaterialApp(
|
||||||
|
title: 'Flutter Demo',
|
||||||
|
theme: ThemeData(
|
||||||
|
primaryColor: Colors.red,
|
||||||
|
accentCoulor: Colors.blue,
|
||||||
|
fontFamily: 'Roboto',
|
||||||
|
textTheme: TextTheme(
|
||||||
|
headline1: TextStyle(fontSize: 24),
|
||||||
|
headline2: TextStyle(fontSize: 20),
|
||||||
|
headline3: TextStyle(fontSize: 16),
|
||||||
|
)),
|
||||||
|
// Cambia la proprietà `home` con `WelcomePage()`
|
||||||
|
home: WelcomePage(),
|
||||||
|
// Aggiungi un nuovo `onGenerateRoute`
|
||||||
|
onGenerateRoute: (settings) {
|
||||||
|
// Se la route è `/home`, esci dal `WelcomePage()` e vai alla `HomePage()`
|
||||||
|
if (settings.name == '/home') {
|
||||||
|
Navigator.pop(context);
|
||||||
|
return MaterialPageRoute(
|
||||||
|
builder: (context) => const HomePage(
|
||||||
|
title: 'Titolo',
|
||||||
|
));
|
||||||
|
}
|
||||||
|
// Altrimenti, restituisci la route predefinita
|
||||||
|
return MaterialPageRoute(builder: (context) => WelcomePage());
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} */
|
||||||
@@ -1,89 +1,24 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class HomePage extends StatefulWidget {
|
class HomePage extends StatefulWidget {
|
||||||
const HomePage({super.key, required this.title});
|
const HomePage({super.key});
|
||||||
|
|
||||||
// This widget is the home page of your application. It is stateful, meaning
|
final String title = "home page";
|
||||||
// that it has a State object (defined below) that contains fields that affect
|
|
||||||
// how it looks.
|
|
||||||
|
|
||||||
// This class is the configuration for the state. It holds the values (in this
|
|
||||||
// case the title) provided by the parent (in this case the App widget) and
|
|
||||||
// used by the build method of the State. Fields in a Widget subclass are
|
|
||||||
// always marked "final".
|
|
||||||
|
|
||||||
final String title;
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
State<HomePage> createState() => _HomePageState();
|
State<HomePage> createState() => _HomePageState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _HomePageState extends State<HomePage> {
|
class _HomePageState extends State<HomePage> {
|
||||||
int _counter = 0;
|
|
||||||
|
|
||||||
void _incrementCounter() {
|
|
||||||
setState(() {
|
|
||||||
// This call to setState tells the Flutter framework that something has
|
|
||||||
// changed in this State, which causes it to rerun the build method below
|
|
||||||
// so that the display can reflect the updated values. If we changed
|
|
||||||
// _counter without calling setState(), then the build method would not be
|
|
||||||
// called again, and so nothing would appear to happen.
|
|
||||||
_counter++;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
// This method is rerun every time setState is called, for instance as done
|
|
||||||
// by the _incrementCounter method above.
|
|
||||||
//
|
|
||||||
// The Flutter framework has been optimized to make rerunning build methods
|
|
||||||
// fast, so that you can just rebuild anything that needs updating rather
|
|
||||||
// than having to individually change instances of widgets.
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
// TRY THIS: Try changing the color here to a specific color (to
|
title: Text('Hello world'),
|
||||||
// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
|
|
||||||
// change color while the other colors stay the same.
|
|
||||||
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
|
||||||
// Here we take the value from the HomePage object that was created by
|
|
||||||
// the App.build method, and use it to set our appbar title.
|
|
||||||
title: Text(widget.title),
|
|
||||||
),
|
),
|
||||||
body: Center(
|
body: Center(
|
||||||
// Center is a layout widget. It takes a single child and positions it
|
child: Text('Hello world!'),
|
||||||
// in the middle of the parent.
|
|
||||||
child: Column(
|
|
||||||
// Column is also a layout widget. It takes a list of children and
|
|
||||||
// arranges them vertically. By default, it sizes itself to fit its
|
|
||||||
// children horizontally, and tries to be as tall as its parent.
|
|
||||||
//
|
|
||||||
// Column has various properties to control how it sizes itself and
|
|
||||||
// how it positions its children. Here we use mainAxisAlignment to
|
|
||||||
// center the children vertically; the main axis here is the vertical
|
|
||||||
// axis because Columns are vertical (the cross axis would be
|
|
||||||
// horizontal).
|
|
||||||
//
|
|
||||||
// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
|
|
||||||
// action in the IDE, or press "p" in the console), to see the
|
|
||||||
// wireframe for each widget.
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: <Widget>[
|
|
||||||
const Text(
|
|
||||||
'You have pushed the button this many times:',
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
'$_counter',
|
|
||||||
style: Theme.of(context).textTheme.headlineMedium,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
floatingActionButton: FloatingActionButton(
|
|
||||||
onPressed: _incrementCounter,
|
|
||||||
tooltip: 'Increment',
|
|
||||||
child: const Icon(Icons.add),
|
|
||||||
), // This trailing comma makes auto-formatting nicer for build methods.
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
63
lib/typography_screen.dart
Normal file
63
lib/typography_screen.dart
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
// 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: 7),
|
||||||
|
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),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -36,6 +36,7 @@ dependencies:
|
|||||||
# Use with the CupertinoIcons class for iOS style icons.
|
# Use with the CupertinoIcons class for iOS style icons.
|
||||||
cupertino_icons: ^1.0.2
|
cupertino_icons: ^1.0.2
|
||||||
firebase_core: ^2.16.0
|
firebase_core: ^2.16.0
|
||||||
|
url_launcher: ^6.1.14
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import 'package:progetto_m335_flutter/main.dart';
|
|||||||
void main() {
|
void main() {
|
||||||
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
|
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
|
||||||
// Build our app and trigger a frame.
|
// Build our app and trigger a frame.
|
||||||
await tester.pumpWidget(const MyApp());
|
await tester.pumpWidget(const App());
|
||||||
|
|
||||||
// Verify that our counter starts at 0.
|
// Verify that our counter starts at 0.
|
||||||
expect(find.text('0'), findsOneWidget);
|
expect(find.text('0'), findsOneWidget);
|
||||||
|
|||||||
Reference in New Issue
Block a user