Skip to content

Commit

Permalink
Refactor theme declaration and introduce theme service (#8)
Browse files Browse the repository at this point in the history
In theme_color_switch.dart, restructured the declaration of themes into a global constant 'appThemes', freeing it from a class field in ZetaThemeColorSwitch. This increases application efficiency and adheres to the DRY (Don't Repeat Yourself) principle. A new file 'theme_service.dart' was also added, serving as an abstract class for loading and saving theme data. Various typos in 'colors.dart' and 'zeta.dart' were fixed to ensure correct execution. Theme data loading and saving operations in 'main.dart' were also updated to use this new service.
  • Loading branch information
ps9310 authored and thelukewalton committed Dec 1, 2023
1 parent 33b0c74 commit c7cffcf
Show file tree
Hide file tree
Showing 12 changed files with 149 additions and 62 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## [0.1.1+1] - 2023-12-01

- feature: Refactor theme declaration and introduce theme service

## [0.1.0+1] - 2023-11-28

- chore: Tidy, reorganise and prepare repo
Expand Down
36 changes: 34 additions & 2 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:zeta_example/theme_service.dart';
import 'package:zeta_flutter/zeta_flutter.dart';
import 'home.dart';

void main() => runApp(const ZetaExample());
void main() async {
WidgetsFlutterBinding.ensureInitialized();

final preferences = await SharedPreferences.getInstance();
final themeService = SharedPrefsThemeService(preferences);
final themPreferences = await themeService.loadTheme();

runApp(
ZetaExample(
themeService: themeService,
initialThemeData: themPreferences.$1 ?? ZetaThemeData(),
initialThemeMode: themPreferences.$2 ?? ThemeMode.system,
initialContrast: themPreferences.$3 ?? ZetaContrast.aa,
),
);
}

class ZetaExample extends StatelessWidget {
const ZetaExample({super.key});
const ZetaExample({
super.key,
required this.themeService,
required this.initialContrast,
required this.initialThemeMode,
required this.initialThemeData,
});

final ZetaThemeService themeService;
final ZetaContrast initialContrast;
final ThemeMode initialThemeMode;
final ZetaThemeData initialThemeData;

@override
Widget build(BuildContext context) {
return ZetaProvider(
themeService: themeService,
initialContrast: initialContrast,
initialThemeData: initialThemeData,
initialThemeMode: initialThemeMode,
builder: (context, themeData, themeMode) {
final dark = themeData.colorsDark.toScheme();
final light = themeData.colorsLight.toScheme();
Expand Down
46 changes: 23 additions & 23 deletions example/lib/pages/theme_color_switch.dart
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
import 'package:flutter/material.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

late final appThemes = {
"default": ZetaThemeData(),
"teal": ZetaThemeData(
identifier: 'teal',
primary: ZetaColorBase.teal,
),
"yellow": ZetaThemeData(
identifier: 'yellow',
primary: ZetaColorBase.yellow,
),
"red": ZetaThemeData(
identifier: 'red',
primary: ZetaColorBase.red,
),
"purple": ZetaThemeData(
identifier: 'purple',
primary: ZetaColorBase.purple,
),
};

class ZetaThemeColorSwitch extends StatelessWidget {
ZetaThemeColorSwitch({super.key});

late final _themes = {
"default": ZetaThemeData(),
"teal": ZetaThemeData(
identifier: 'teal',
primary: ZetaColorBase.teal,
),
"yellow": ZetaThemeData(
identifier: 'yellow',
primary: ZetaColorBase.yellow,
),
"red": ZetaThemeData(
identifier: 'red',
primary: ZetaColorBase.red,
),
"purple": ZetaThemeData(
identifier: 'purple',
primary: ZetaColorBase.purple,
),
};

@override
Widget build(BuildContext context) {
var zeta = Zeta.of(context);
Expand All @@ -44,8 +44,8 @@ class ZetaThemeColorSwitch extends StatelessWidget {
alignment: Alignment.center,
icon: SizedBox(width: 8),
dropdownColor: zeta.colors.borderDisabled,
items: _themes.entries.map((e) {
var zetaColors = primary(_themes[e.key]!);
items: appThemes.entries.map((e) {
var zetaColors = primary(appThemes[e.key]!);
var color = zetaColors.primary;
return DropdownMenuItem<String>(
value: e.value.identifier,
Expand All @@ -58,7 +58,7 @@ class ZetaThemeColorSwitch extends StatelessWidget {
);
}).toList(),
onChanged: (value) {
final theme = _themes[value];
final theme = appThemes[value];
if (theme != null) {
ZetaProvider.of(context).updateThemeData(theme);
}
Expand Down
47 changes: 47 additions & 0 deletions example/lib/theme_service.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import 'package:flutter/src/material/app.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:zeta_example/pages/theme_color_switch.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class SharedPrefsThemeService extends ZetaThemeService {
SharedPrefsThemeService(this.preferences);

final SharedPreferences preferences;

@override
Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme() async {
final theme = preferences.getString('theme') ?? 'default';
final themeData = appThemes[theme];

final modeString = preferences.getString('themeMode');
final themeMode = modeString == 'light'
? ThemeMode.light
: modeString == 'dark'
? ThemeMode.dark
: ThemeMode.system;

final contrastString = preferences.getString('contrast');
final contrast = contrastString == 'aaa' ? ZetaContrast.aaa : ZetaContrast.aa;

return (themeData, themeMode, contrast);
}

@override
Future<void> saveTheme({
required ZetaThemeData themeData,
required ThemeMode themeMode,
required ZetaContrast contrast,
}) async {
await preferences.setString('theme', themeData.identifier);

final modeString = themeMode == ThemeMode.light
? 'light'
: themeMode == ThemeMode.dark
? 'dark'
: 'system';
await preferences.setString('themeMode', modeString);

final contrastString = contrast == ZetaContrast.aaa ? 'aaa' : 'aa';
await preferences.setString('contrast', contrastString);
}
}
12 changes: 0 additions & 12 deletions example/macos/Flutter/GeneratedPluginRegistrant.swift

This file was deleted.

3 changes: 2 additions & 1 deletion example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ version: 0.0.1
publish_to: "none"

environment:
sdk: ">=2.19.1 <3.0.0"
sdk: ">=3.0.1 <4.0.0"

dependencies:
flutter:
sdk: flutter
go_router: ^11.1.2
google_fonts: ^6.1.0
shared_preferences: ^2.2.2
zeta_flutter:
path: ../

Expand Down
1 change: 1 addition & 0 deletions lib/src/theme/color_swatch.dart
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ class ZetaColorSwatch extends ColorSwatch<int> {
///
/// It ensures that the 60th and 80th shades from swatch are abide by the AA and AAA accessibility standards on [background], respectively.
/// [background] color defaults to [ZetaColorBase.greyWarm] shade10.
/// {@endtemplate}
factory ZetaColorSwatch.fromColor(
Color primary, {
Brightness brightness = Brightness.light,
Expand Down
8 changes: 4 additions & 4 deletions lib/src/theme/colors.dart
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,13 @@ class ZetaColors {

// Text / icons.

/// {@template zeta-color-dark}
/// Default text /icon color.
///
/// Defaults to `ZetaColors.cool.90`.
///
/// {@template zeta-color-dark}
/// Color swatches are inverted if [ZetaColors.brightness] is Dark.
/// {@endTemplate}
/// {@endtemplate}
Color get textDefault => cool.shade90;

/// Subtle text /icon color.
Expand Down Expand Up @@ -252,13 +252,13 @@ class ZetaColors {
/// {@macro zeta-color-dark}
Color get textInverse => cool.shade20;

/// {@template zeta-color-dark}
/// Default icon color.
///
/// Defaults to `ZetaColors.cool.90`.
///
/// {@template zeta-color-dark}
/// Color swatches are inverted if [ZetaColors.brightness] is Dark.
/// {@endTemplate}
/// {@endtemplate}
Color get iconDefault => textDefault;

/// Subtle icon color.
Expand Down
26 changes: 19 additions & 7 deletions lib/src/theme/theme_service.dart
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import 'package:flutter/material.dart';

import 'contrast.dart';
import 'theme_data.dart';

/// `ZetaThemeService` is an abstract class.
/// It provides the structure for loading and saving themes in Zeta application.
abstract class ZetaThemeService {
/// Loads the application's theme.
/// Asynchronously load the theme data.
///
/// `loadTheme` is a method to retrieve the current theme data.
/// This method returns a `Future` that when complete will produce a
/// tuple of `ZetaThemeData`, `ThemeMode`, and `ZetaContrast`.
///
/// Returns a `Future` that completes with the `ZetaThemeData` object
/// that represents the current theme.
Future<ZetaThemeData?> loadTheme();
/// `ZetaThemeData` describes the colors that are used by a theme.
///
/// `ThemeMode` determines the brightness of the system.
///
/// `ZetaContrast` defines different contrast styles to use across the application.
///
/// Returns a Future `(ZetaThemeData?, ThemeMode?, ZetaContrast?)`.
Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme();

/// Saves the provided theme data as the application's theme.
///
Expand All @@ -21,5 +29,9 @@ abstract class ZetaThemeService {
///
/// Returns a `Future` that completes when the theme data has been successfully saved.
Future<void> saveTheme(ZetaThemeData themeData);
Future<void> saveTheme({
required ZetaThemeData themeData,
required ThemeMode themeMode,
required ZetaContrast contrast,
});
}
25 changes: 13 additions & 12 deletions lib/src/zeta.dart
Original file line number Diff line number Diff line change
Expand Up @@ -248,17 +248,6 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets

// Apply the initial contrast to the theme data.
_themeData = widget.initialThemeData.apply(contrast: _contrast);

// Load theme data from themeService if available.
unawaited(
widget.themeService?.loadTheme().then((value) {
if (value != null) {
setState(() {
_themeData = value;
});
}
}),
);
}

/// Clean up function to be called when this object is removed from the tree.
Expand Down Expand Up @@ -332,14 +321,15 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets
void updateThemeMode(ThemeMode themeMode) {
setState(() {
_themeMode = themeMode;
_saveThemeChange();
});
}

/// Updates the current theme data.
void updateThemeData(ZetaThemeData data) {
setState(() {
_themeData = data.apply(contrast: _contrast);
unawaited(widget.themeService?.saveTheme(data));
_saveThemeChange();
});
}

Expand All @@ -348,9 +338,20 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets
setState(() {
_contrast = contrast;
_themeData = _themeData.apply(contrast: contrast);
_saveThemeChange();
});
}

void _saveThemeChange() {
unawaited(
widget.themeService?.saveTheme(
themeData: _themeData,
themeMode: _themeMode,
contrast: _contrast,
),
);
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
Expand Down
1 change: 1 addition & 0 deletions lib/zeta_flutter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export 'src/theme/color_swatch.dart';
export 'src/theme/constants.dart';
export 'src/theme/contrast.dart';
export 'src/theme/theme_data.dart';
export 'src/theme/theme_service.dart';
export 'src/tokens.dart';
export 'src/utils/extensions.dart';
export 'src/zeta.dart';
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: zeta_flutter
version: 0.1.0+1
version: 0.1.1+1
description: Zeta is the new, formal, standardized Zebra Design System based off the successes of ZDS (Zebra Design System). This package is in pre-release, and so many aspects are incomplete.
homepage: https://github.com/zebradevs/zeta_flutter
repository: https://github.com/zebradevs/zeta_flutter
Expand Down

0 comments on commit c7cffcf

Please sign in to comment.