Skip to content

Commit

Permalink
Merge pull request #121 from rydmike/pg_ui_work
Browse files Browse the repository at this point in the history 
Version 7.0.1: Compact Playground UIs
  • Loading branch information
@rydmike
rydmike committed Apr 6, 2023
2 parents 798eed5 + 19ceee1 commit 6aa2047
Show file tree
Hide file tree
Showing 84 changed files with 3,000 additions and 1,784 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@

All changes to the **FlexColorScheme** (FCS) package are documented here.

## 7.0.1

**Apr 6, 2023**

* **Package**
* No changes.
* **Themes Playground**
* Less chatty UI
* Revised media size breakpoints.
* Vertical color selector mode.
* More compact UI options for smaller laptop displays and tablets.

## 7.0.0

**Apr 2, 2023**
Expand Down
2 changes: 1 addition & 1 deletion example/lib/example5_themes_playground/theme/theme_data_dark.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ ThemeData themeDataDark(ThemeController controller) {
// effective scheme in the Playground app.
colorScheme: colorScheme,
// Use the colorScheme to make a nicer light theme.
primaryColor: colorScheme.primary,
primaryColor: colorScheme.surface,
canvasColor: colorScheme.background,
scaffoldBackgroundColor: colorScheme.background,
cardColor: colorScheme.surface,
Expand Down
2 changes: 1 addition & 1 deletion example/lib/example5_themes_playground/theme/theme_data_light.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ ThemeData themeDataLight(ThemeController controller) {
// effective scheme in the Playground app.
colorScheme: colorScheme,
// Use the colorScheme to make a nicer light theme.
primaryColor: colorScheme.surface,
primaryColor: colorScheme.primary,
canvasColor: colorScheme.background,
scaffoldBackgroundColor: colorScheme.background,
cardColor: colorScheme.surface,
Expand Down
79 changes: 47 additions & 32 deletions example/lib/example5_themes_playground/widgets/pages/home_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import 'theme_topic.dart';
import 'theme_topic_page.dart';
import 'theme_topics_grid_page.dart';
import 'theme_two_topics_page.dart';
import 'theme_two_topics_vertical_page.dart';

/// Home Page for FlexColorScheme EXAMPLE 5 - Themes Playground.
///
Expand Down Expand Up @@ -59,15 +60,15 @@ class _HomePageState extends State<HomePage> {
// Set enabled menu items.
menuItemsEnabled =
List<bool>.generate(App.menuItems.length, (int i) => true);
menuItemsEnabled[8] = widget.controller.isLargeGridView;
menuItemsEnabled[9] = widget.controller.isLargeGridView;
menuItemsEnabled[5] = widget.controller.useFlexColorScheme;
menuItemsEnabled[10] = widget.controller.isLargeGridView;
menuItemsEnabled[3] = widget.controller.useFlexColorScheme;

// Set menu icons states to initial states, some are a loaded from
// persisted values via the theme controller.
menuItemsIconState = List<ResponsiveMenuItemIconState>.generate(
App.menuItems.length, (int i) => ResponsiveMenuItemIconState.primary);
menuItemsIconState[0] = widget.controller.isLargeGridView
menuItemsIconState[6] = widget.controller.isLargeGridView
? ResponsiveMenuItemIconState.secondary
: ResponsiveMenuItemIconState.primary;

Expand All @@ -81,22 +82,26 @@ class _HomePageState extends State<HomePage> {
@override
void didChangeDependencies() {
super.didChangeDependencies();
menuItemsIconState[1] = widget.controller.compactMode

menuItemsIconState[0] = Theme.of(context).brightness == Brightness.light
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsIconState[1] = widget.controller.useMaterial3
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsIconState[2] = Theme.of(context).brightness == Brightness.light
menuItemsIconState[2] = widget.controller.useFlexColorScheme
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsIconState[3] = widget.controller.useMaterial3
menuItemsIconState[3] = widget.controller.useSubThemes
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsIconState[4] = widget.controller.useFlexColorScheme
menuItemsEnabled[3] = widget.controller.useFlexColorScheme;
menuItemsIconState[7] = widget.controller.compactMode
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsIconState[5] = widget.controller.useSubThemes
menuItemsIconState[8] = widget.controller.verticalMode
? ResponsiveMenuItemIconState.primary
: ResponsiveMenuItemIconState.secondary;
menuItemsEnabled[5] = widget.controller.useFlexColorScheme;
}

void updateMenuState(int index) {
Expand All @@ -120,6 +125,9 @@ class _HomePageState extends State<HomePage> {
media.size.width > App.mediumDesktopWidthBreakpoint;
final String materialType = theme.useMaterial3 ? 'M3 - ' : 'M2 - ';

// Disable vertical/horizontal setting when it has no effect.
menuItemsEnabled[8] = isBigDesktop && !widget.controller.isLargeGridView;

return AnnotatedRegion<SystemUiOverlayStyle>(
value: FlexColorScheme.themedSystemNavigationBar(
context,
Expand Down Expand Up @@ -150,21 +158,8 @@ class _HomePageState extends State<HomePage> {
menuItemsIconState: menuItemsIconState,
// Callback from menu, using simple index based actions here.
onSelect: (int index) async {
// Toggle grid view mode true/false.
if (index == 0) {
widget.controller
.setLargeGridView(!widget.controller.isLargeGridView);
menuItemsEnabled[8] = !menuItemsEnabled[8];
menuItemsEnabled[9] = !menuItemsEnabled[9];
updateMenuState(index);
}
// Toggle compact/standard mode.
else if (index == 1) {
widget.controller.setCompactMode(!widget.controller.compactMode);
updateMenuState(index);
}
// Set theme-mode light/dark
else if (index == 2) {
if (index == 0) {
if (isDark) {
widget.controller.setThemeMode(ThemeMode.light);
} else {
Expand All @@ -174,7 +169,7 @@ class _HomePageState extends State<HomePage> {
// didChangeDependencies called when the theme actually changes.
}
// Set M3 ON/OFF
else if (index == 3) {
else if (index == 1) {
if (widget.controller.useMaterial3) {
widget.controller.setUseMaterial3(false);
} else {
Expand All @@ -183,7 +178,7 @@ class _HomePageState extends State<HomePage> {
updateMenuState(index);
}
// Set FCS ON/OFF
else if (index == 4) {
else if (index == 2) {
if (widget.controller.useFlexColorScheme) {
widget.controller.setUseFlexColorScheme(false);
} else {
Expand All @@ -192,7 +187,7 @@ class _HomePageState extends State<HomePage> {
updateMenuState(index);
}
// Set Sub-themes ON/OFF
else if (index == 5) {
else if (index == 3) {
if (widget.controller.useSubThemes) {
widget.controller.setUseSubThemes(false);
} else {
Expand All @@ -201,11 +196,11 @@ class _HomePageState extends State<HomePage> {
updateMenuState(index);
}
// Copy theme setup code
else if (index == 6) {
else if (index == 4) {
await showCopySetupCodeDialog(context, widget.controller);
}
// Copy ColorScheme code
else if (index == 7) {
else if (index == 5) {
final String code = generateColorSchemeDartCode(widget.controller);
await showResponsiveDialog<void>(
context: context,
Expand All @@ -216,22 +211,40 @@ class _HomePageState extends State<HomePage> {
),
);
}
// Open all cards
// Toggle grid view mode true/false.
else if (index == 6) {
widget.controller
.setLargeGridView(!widget.controller.isLargeGridView);
menuItemsEnabled[9] = !menuItemsEnabled[9];
menuItemsEnabled[10] = !menuItemsEnabled[10];
updateMenuState(index);
}
// Toggle compact/standard mode.
else if (index == 7) {
widget.controller.setCompactMode(!widget.controller.compactMode);
updateMenuState(index);
}
// Toggle horizontal/vertical mode.
else if (index == 8) {
widget.controller.setVerticalMode(!widget.controller.verticalMode);
updateMenuState(index);
}
// Open all cards
else if (index == 9) {
for (int i = 0; i < isPanelOpen.length; i++) {
isPanelOpen[i] = true;
}
setState(() {});
}
// Close all cards
else if (index == 9) {
else if (index == 10) {
for (int i = 0; i < isPanelOpen.length; i++) {
isPanelOpen[i] = false;
}
setState(() {});
}
// Reset theme settings.
else if (index == 10) {
else if (index == 11) {
final bool? reset = await showDialog<bool?>(
context: context,
builder: (BuildContext context) {
Expand All @@ -250,7 +263,9 @@ class _HomePageState extends State<HomePage> {
toggleCard: togglePanelOpenClose,
)
: isBigDesktop
? ThemeTwoTopicsPage(controller: widget.controller)
? widget.controller.verticalMode
? ThemeTwoTopicsVerticalPage(controller: widget.controller)
: ThemeTwoTopicsPage(controller: widget.controller)
: ThemeTopicPage(controller: widget.controller),
),
);
Expand Down

0 comments on commit 6aa2047

Please sign in to comment.