Skip to content

Commit

Permalink
Playground: Use constrained max width for all dialogs, not text line …
Browse files Browse the repository at this point in the history
…breaks!
rydmike committed Oct 26, 2024
1 parent bb5fa4f commit 43a4385
Showing 14 changed files with 140 additions and 73 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm is active scheme should be copied over to the
/// custom and modifiable scheme.
class CopySchemeToCustomDialog extends StatelessWidget {
@@ -8,13 +10,16 @@ class CopySchemeToCustomDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Copy to custom colors?'),
content: const Text("Copy this color scheme's colors to the customizable "
'colors?\n\n'
'Current customizable light and dark color scheme will be '
'overwritten and set to the colors of this scheme.\n'
'You will be able edit and make a custom scheme with these colors '
'as a starting point.'),
title: const Text('Copy To Custom Colors?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text("Copy this color scheme's colors to the customizable "
'colors?\n\n'
'Current customizable light and dark color scheme will be '
'overwritten and set to the colors of this scheme. '
'You will be able edit and make a custom scheme with these colors '
'as a starting point.'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,19 +1,32 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to delete all Playground settings data.
class DeleteSettingsDataDialog extends StatelessWidget {
const DeleteSettingsDataDialog({super.key});

@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Delete stored settings'),
content: const Text('Delete all stored settings data?\n'
'All persisted theme settings in local storage will be deleted!\n'
'\n'
'This is useful for purging all keys from the local storage\n'
'including any invalid keys from older Playground versions or\n'
'invalid data inserted via invalid JSON import keys.\n'),
title: const Text('Delete Stored Settings?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('All persisted theme settings in local '
'storage will be deleted!\n'
'\n'
'This is useful for purging all keys from the local storage '
'including any invalid keys from older Playground versions or '
'invalid data inserted via invalid JSON import keys. There are '
'checks to prevent invalid JSON keys from being imported.\n'
'\n'
'This is a way to clean up the local storage and remove '
'legacy no longer used keys stored in it. You rarely need '
'to use this feature, but if you do it before you start a new '
'fresh configuration, you may get a shorter more '
'compact JSON settings export, as it wont included any stored '
'values that are not used in the effective config.'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to import a Playground setup.
class ImportSettingsDialog extends StatelessWidget {
const ImportSettingsDialog({super.key});

@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Import Playground Settings'),
content: const Text('Import the settings from the staging area?\n'
'\n'
'You current configuration will be overwritten and replaced\n'
'with the settings from the staging area.'),
title: const Text('Import Playground Settings?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Import the settings from the staging area?\n'
'\n'
'You current configuration will be overwritten and replaced '
'with the JSON settings from the staging area!'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to reset the current custom colors.
class ResetCustomColorsDialog extends StatelessWidget {
const ResetCustomColorsDialog({super.key});

@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Reset custom colors'),
content: const Text('Set custom color definitions back to their '
'default values?'),
title: const Text('Reset Custom Colors?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Set custom color definitions back to their '
'default values?'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to reset the current FlexColorscheme setup.
class ResetSettingsDialog extends StatelessWidget {
const ResetSettingsDialog({super.key});

@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Reset theme settings'),
content: const Text('Reset all theme settings back to their default '
'values?\n'
'\n'
'Persisted theme settings will also be updated to default values.\n'
'Your custom theme colors will not be reset.'),
title: const Text('Reset Theme Settings?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Reset all theme settings back to their default '
'values?\n'
'\n'
'Persisted theme settings will also be updated to default values. '
'Your custom theme colors will not be reset.'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to set TextField to Playground defaults.
class SetTextFieldToDefaultsDialog extends StatelessWidget {
const SetTextFieldToDefaultsDialog({super.key});
@@ -8,8 +10,11 @@ class SetTextFieldToDefaultsDialog extends StatelessWidget {
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Set TextField to Defaults?'),
content: const Text('Set the text field settings back to the '
"Playground's default values?"),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Set the text field settings back to the '
"Playground's default values?"),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to set TextField to Outlined example.
class SetTextFieldToDenseDialog extends StatelessWidget {
const SetTextFieldToDenseDialog({super.key});
@@ -8,8 +10,11 @@ class SetTextFieldToDenseDialog extends StatelessWidget {
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Set TextField to Dense?'),
content: const Text('Set the text field settings to an example '
'using dense text field and no outline border?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Set the text field settings to an example '
'using dense text field and no outline border?'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to set TextField to M3.
class SetTextFieldToM3Dialog extends StatelessWidget {
const SetTextFieldToM3Dialog({super.key});
@@ -8,8 +10,11 @@ class SetTextFieldToM3Dialog extends StatelessWidget {
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Set TextField to Material-3?'),
content: const Text('Set the text field settings to values that '
'match Material-3 defaults?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Set the text field settings to values that '
'match Material-3 defaults?'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to set TextField to Outlined example.
class SetTextFieldToOutlinedDialog extends StatelessWidget {
const SetTextFieldToOutlinedDialog({super.key});
@@ -8,8 +10,11 @@ class SetTextFieldToOutlinedDialog extends StatelessWidget {
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Set TextField to Colored Outlined?'),
content: const Text('Set the text field settings to an example '
'using colored outlined border?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Set the text field settings to an example '
'using colored outlined border?'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';

import '../../../shared/const/app.dart';

/// Dialog to confirm if user wants to set theme to a premade setup.
class SetThemeToPremadeDialog extends StatelessWidget {
const SetThemeToPremadeDialog({super.key, required this.selectedOption});
@@ -8,9 +10,12 @@ class SetThemeToPremadeDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('Use "$selectedOption" theme?'),
content: const Text('Your current configuration will be overwritten, '
'but custom colors will be kept.'),
title: Text('Use "$selectedOption" premade setup?'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: const Text('Your current configuration will be overwritten, '
'but any used and defined custom colors will be kept.'),
),
actions: <Widget>[
TextButton(
onPressed: () {
Original file line number Diff line number Diff line change
@@ -242,9 +242,13 @@ class _ThemeCodePanelState extends State<ThemeCodePanel> {
contentPadding: ThemeValues.tilePaddingEnd(context, isRow),
title: const Text('Separate file'),
subtitleReveal: const Text(
'Turn ON to get theme definitions '
'intended for a separate file instead of using the '
'theme definitions in your MaterialApp setup directly.\n',
'Keep ON to get theme definitions '
'intended for a separate file, instead of using the '
'theme definitions in your MaterialApp setup directly.\n'
'\n'
'Turn OFF to get the theme definitions in same format as '
'versions before V8, that are intended to be used directly '
'in your MaterialApp setup.\n',
),
value: widget.controller.generateCodeForOwnFile,
onChanged: widget.controller.setGenerateCodeForOwnFile,
3 changes: 3 additions & 0 deletions example/lib/shared/const/app.dart
Original file line number Diff line number Diff line change
@@ -119,6 +119,9 @@ sealed class App {
/// Edge insets and margins for big desktop breakpoint size.
static const double edgeInsetsBigDesktop = 24;

/// The maximum width for an AlertDialog.
static const double maxAlertDialogWidth = 400;

/// Responsive insets based on width.
///
/// The width may be from LayoutBuilder or
2 changes: 1 addition & 1 deletion example/lib/shared/const/store.dart
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@ sealed class Store {
// Key used to read and save the generateCodeForOwnFile value.
static const String keyGenerateCodeForOwnFile = 'generateCodeForOwnFile';
// Default value for the generateCodeForOwnFile, also used to reset settings.
static const bool defaultGenerateCodeForFile = false;
static const bool defaultGenerateCodeForFile = true;

// Key used to read and save the applyThemeToAllCupertino value.
//
62 changes: 32 additions & 30 deletions example/lib/shared/widgets/examples/about.dart
Original file line number Diff line number Diff line change
@@ -78,36 +78,38 @@ void showAppAboutDialog(BuildContext context, [bool useRootNavigator = true]) {
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 24),
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
style: aboutTextStyle,
text: 'The ${App.title(context)} application demonstrates '
'features\n'
'of the ${App.packageName} Flutter theming package.\n\n'
'To learn more, check out the package on ',
),
LinkTextSpan(
style: linkStyle,
uri: App.packageUri,
text: 'pub.dev',
),
TextSpan(
style: aboutTextStyle,
text: '.\n'
'It also includes the source code of this application.\n'
'\n',
),
TextSpan(
style: footerStyle,
text: 'Built with Flutter ${App.flutterVersion}, '
'using ${App.packageName} '
'${App.version}\n'
'Media size (w:${width.toStringAsFixed(0)}, '
'h:${height.toStringAsFixed(0)})\n\n',
),
],
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: App.maxAlertDialogWidth),
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
style: aboutTextStyle,
text: 'The ${App.title(context)} application demonstrates '
'features '
'of the ${App.packageName} Flutter theming package.\n\n'
'To learn more, check out the package on ',
),
LinkTextSpan(
style: linkStyle,
uri: App.packageUri,
text: 'pub.dev',
),
TextSpan(
style: aboutTextStyle,
text: '. It also includes the source code '
'of this application.\n\n',
),
TextSpan(
style: footerStyle,
text: 'Built with Flutter ${App.flutterVersion}, '
'using ${App.packageName} '
'${App.version}. '
'Media size (w:${width.toStringAsFixed(0)}, '
'h:${height.toStringAsFixed(0)})\n\n',
),
],
),
),
),
),

0 comments on commit 43a4385

Please sign in to comment.