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,
),
),
),
);
}
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);
}
get the currently selected theme index
var current_theme_index = themeController.schemeIndex
get all theme built out from flex_color_scheme
final themes = [...AppColor.customSchemes];
/// 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],
);
},
),
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.
Libraries
- const/app
- const/app_color
- const/const
- const/store
- model/adaptive_theme
- model/flex_tones_enum
- model/splash_type_enum
- model/visual_density_enum
- services/services
- services/theme_service
- services/theme_service_hive
- services/theme_service_hive_adapters
- services/theme_service_mem
- services/theme_service_prefs
- theme/adaptive_theme
- theme/code_theme
- theme/flex_theme_dark
- theme/flex_theme_light
- theme/theme
- theme/theme_data_dark
- theme/theme_data_light
- theme/theme_service
- theme/topic_theme
- theme_controller
- utils/app_data_dir/app_data_dir
- utils/app_data_dir/app_data_dir_vm
- utils/app_data_dir/app_data_dir_web
- utils/app_scroll_behavior
- utils/breakpoint
- utils/colors_are_close
- utils/link_text_span
- utils/random_color
- utils/same_types
- vox_flex_theme