Description:

vox flex theme

When integrating the flex_color_scheme package into flutter you may want to more easily attach controllers and be able to switch between many different type of themes quickly, this allows this seemlessly.
Features #

Built in ThemeController, that we can attach at the top of our application

Getting started && Usage #
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();

final themeService = ThemeServiceHive('color_theme_hive');
// Initialize the theme service.
await themeService.init();
// Create a ThemeController that uses the ThemeService.
final ThemeController themeController = ThemeController(themeService);
// Load preferred theme settings, while the app is loading, before MaterialApp
// is created, this prevents a theme change when the app is first displayed.
await themeController.loadAll();

runApp(
ChangeNotifierProvider(
create: (_) => themeController,
/// your app here!
child: ModularApp(
module: MainModule(),
child: MainPage(
controller: themeController,
),
),
),
);
}

copied to clipboard
now when we need to switch themes we can use the bellow very easily
final themeController = context.watch<ThemeController>();
bool isLight = themeController.themeMode == ThemeMode.light;

// Set theme-mode light/dark
if (isLight) {
themeController.setThemeMode(ThemeMode.dark);
} else {
themeController.setThemeMode(ThemeMode.light);
}
copied to clipboard
get the currently selected theme index
var current_theme_index = themeController.schemeIndex
copied to clipboard
get all theme built out from flex_color_scheme
final themes = [...AppColor.customSchemes];
copied to clipboard
/// lets iterate over these and show them!
ListView.builder(
padding: const EdgeInsets.only(
right: kPad,
left: kPad / 4,
bottom: kPad * kPad,
),
itemCount: themes.length,
itemBuilder: (context, index) {
/// the bellow will call a method like
/// themeController.setThemeMode(isLight //
/// ? ThemeMode.light
/// : ThemeMode.dark);
/// themeController.setSchemeIndex(index);


return ColorThemeListTile(
index: index,
themeData: themes[index],
);


},
),
copied to clipboard
Additional information #
we are using many different packages here! so this could cause some version issues, however for the time being this is simpela enough and adds a lot of functionality to our app. so a necessary evil.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter