Skip to content

Commit 6aa2047

Browse files
rydmikerydmike
authored
Merge pull request #121 from rydmike/pg_ui_work
Version 7.0.1: Compact Playground UIs
2 parents 798eed5 + 19ceee1 commit 6aa2047

File tree

84 files changed

+3000
-1784
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+3000
-1784
lines changed

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@
22

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

5+
## 7.0.1
6+
7+
**Apr 6, 2023**
8+
9+
* **Package**
10+
* No changes.
11+
* **Themes Playground**
12+
* Less chatty UI
13+
* Revised media size breakpoints.
14+
* Vertical color selector mode.
15+
* More compact UI options for smaller laptop displays and tablets.
16+
517
## 7.0.0
618

719
**Apr 2, 2023**

‎example/lib/example5_themes_playground/theme/theme_data_dark.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ ThemeData themeDataDark(ThemeController controller) {
4646
// effective scheme in the Playground app.
4747
colorScheme: colorScheme,
4848
// Use the colorScheme to make a nicer light theme.
49-
primaryColor: colorScheme.primary,
49+
primaryColor: colorScheme.surface,
5050
canvasColor: colorScheme.background,
5151
scaffoldBackgroundColor: colorScheme.background,
5252
cardColor: colorScheme.surface,

‎example/lib/example5_themes_playground/theme/theme_data_light.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ ThemeData themeDataLight(ThemeController controller) {
4646
// effective scheme in the Playground app.
4747
colorScheme: colorScheme,
4848
// Use the colorScheme to make a nicer light theme.
49-
primaryColor: colorScheme.surface,
49+
primaryColor: colorScheme.primary,
5050
canvasColor: colorScheme.background,
5151
scaffoldBackgroundColor: colorScheme.background,
5252
cardColor: colorScheme.surface,

‎example/lib/example5_themes_playground/widgets/pages/home_page.dart‎

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import 'theme_topic.dart';
1515
import 'theme_topic_page.dart';
1616
import 'theme_topics_grid_page.dart';
1717
import 'theme_two_topics_page.dart';
18+
import 'theme_two_topics_vertical_page.dart';
1819

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

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

@@ -81,22 +82,26 @@ class _HomePageState extends State<HomePage> {
8182
@override
8283
void didChangeDependencies() {
8384
super.didChangeDependencies();
84-
menuItemsIconState[1] = widget.controller.compactMode
85+
86+
menuItemsIconState[0] = Theme.of(context).brightness == Brightness.light
87+
? ResponsiveMenuItemIconState.primary
88+
: ResponsiveMenuItemIconState.secondary;
89+
menuItemsIconState[1] = widget.controller.useMaterial3
8590
? ResponsiveMenuItemIconState.primary
8691
: ResponsiveMenuItemIconState.secondary;
87-
menuItemsIconState[2] = Theme.of(context).brightness == Brightness.light
92+
menuItemsIconState[2] = widget.controller.useFlexColorScheme
8893
? ResponsiveMenuItemIconState.primary
8994
: ResponsiveMenuItemIconState.secondary;
90-
menuItemsIconState[3] = widget.controller.useMaterial3
95+
menuItemsIconState[3] = widget.controller.useSubThemes
9196
? ResponsiveMenuItemIconState.primary
9297
: ResponsiveMenuItemIconState.secondary;
93-
menuItemsIconState[4] = widget.controller.useFlexColorScheme
98+
menuItemsEnabled[3] = widget.controller.useFlexColorScheme;
99+
menuItemsIconState[7] = widget.controller.compactMode
94100
? ResponsiveMenuItemIconState.primary
95101
: ResponsiveMenuItemIconState.secondary;
96-
menuItemsIconState[5] = widget.controller.useSubThemes
102+
menuItemsIconState[8] = widget.controller.verticalMode
97103
? ResponsiveMenuItemIconState.primary
98104
: ResponsiveMenuItemIconState.secondary;
99-
menuItemsEnabled[5] = widget.controller.useFlexColorScheme;
100105
}
101106

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

128+
// Disable vertical/horizontal setting when it has no effect.
129+
menuItemsEnabled[8] = isBigDesktop && !widget.controller.isLargeGridView;
130+
123131
return AnnotatedRegion<SystemUiOverlayStyle>(
124132
value: FlexColorScheme.themedSystemNavigationBar(
125133
context,
@@ -150,21 +158,8 @@ class _HomePageState extends State<HomePage> {
150158
menuItemsIconState: menuItemsIconState,
151159
// Callback from menu, using simple index based actions here.
152160
onSelect: (int index) async {
153-
// Toggle grid view mode true/false.
154-
if (index == 0) {
155-
widget.controller
156-
.setLargeGridView(!widget.controller.isLargeGridView);
157-
menuItemsEnabled[8] = !menuItemsEnabled[8];
158-
menuItemsEnabled[9] = !menuItemsEnabled[9];
159-
updateMenuState(index);
160-
}
161-
// Toggle compact/standard mode.
162-
else if (index == 1) {
163-
widget.controller.setCompactMode(!widget.controller.compactMode);
164-
updateMenuState(index);
165-
}
166161
// Set theme-mode light/dark
167-
else if (index == 2) {
162+
if (index == 0) {
168163
if (isDark) {
169164
widget.controller.setThemeMode(ThemeMode.light);
170165
} else {
@@ -174,7 +169,7 @@ class _HomePageState extends State<HomePage> {
174169
// didChangeDependencies called when the theme actually changes.
175170
}
176171
// Set M3 ON/OFF
177-
else if (index == 3) {
172+
else if (index == 1) {
178173
if (widget.controller.useMaterial3) {
179174
widget.controller.setUseMaterial3(false);
180175
} else {
@@ -183,7 +178,7 @@ class _HomePageState extends State<HomePage> {
183178
updateMenuState(index);
184179
}
185180
// Set FCS ON/OFF
186-
else if (index == 4) {
181+
else if (index == 2) {
187182
if (widget.controller.useFlexColorScheme) {
188183
widget.controller.setUseFlexColorScheme(false);
189184
} else {
@@ -192,7 +187,7 @@ class _HomePageState extends State<HomePage> {
192187
updateMenuState(index);
193188
}
194189
// Set Sub-themes ON/OFF
195-
else if (index == 5) {
190+
else if (index == 3) {
196191
if (widget.controller.useSubThemes) {
197192
widget.controller.setUseSubThemes(false);
198193
} else {
@@ -201,11 +196,11 @@ class _HomePageState extends State<HomePage> {
201196
updateMenuState(index);
202197
}
203198
// Copy theme setup code
204-
else if (index == 6) {
199+
else if (index == 4) {
205200
await showCopySetupCodeDialog(context, widget.controller);
206201
}
207202
// Copy ColorScheme code
208-
else if (index == 7) {
203+
else if (index == 5) {
209204
final String code = generateColorSchemeDartCode(widget.controller);
210205
await showResponsiveDialog<void>(
211206
context: context,
@@ -216,22 +211,40 @@ class _HomePageState extends State<HomePage> {
216211
),
217212
);
218213
}
219-
// Open all cards
214+
// Toggle grid view mode true/false.
215+
else if (index == 6) {
216+
widget.controller
217+
.setLargeGridView(!widget.controller.isLargeGridView);
218+
menuItemsEnabled[9] = !menuItemsEnabled[9];
219+
menuItemsEnabled[10] = !menuItemsEnabled[10];
220+
updateMenuState(index);
221+
}
222+
// Toggle compact/standard mode.
223+
else if (index == 7) {
224+
widget.controller.setCompactMode(!widget.controller.compactMode);
225+
updateMenuState(index);
226+
}
227+
// Toggle horizontal/vertical mode.
220228
else if (index == 8) {
229+
widget.controller.setVerticalMode(!widget.controller.verticalMode);
230+
updateMenuState(index);
231+
}
232+
// Open all cards
233+
else if (index == 9) {
221234
for (int i = 0; i < isPanelOpen.length; i++) {
222235
isPanelOpen[i] = true;
223236
}
224237
setState(() {});
225238
}
226239
// Close all cards
227-
else if (index == 9) {
240+
else if (index == 10) {
228241
for (int i = 0; i < isPanelOpen.length; i++) {
229242
isPanelOpen[i] = false;
230243
}
231244
setState(() {});
232245
}
233246
// Reset theme settings.
234-
else if (index == 10) {
247+
else if (index == 11) {
235248
final bool? reset = await showDialog<bool?>(
236249
context: context,
237250
builder: (BuildContext context) {
@@ -250,7 +263,9 @@ class _HomePageState extends State<HomePage> {
250263
toggleCard: togglePanelOpenClose,
251264
)
252265
: isBigDesktop
253-
? ThemeTwoTopicsPage(controller: widget.controller)
266+
? widget.controller.verticalMode
267+
? ThemeTwoTopicsVerticalPage(controller: widget.controller)
268+
: ThemeTwoTopicsPage(controller: widget.controller)
254269
: ThemeTopicPage(controller: widget.controller),
255270
),
256271
);

0 commit comments

Comments
 (0)