Description:

theme mode builder

Theme Mode Builder 🚀 #





I created this package to help standardize my apps way of theme handling.
Web Demo: https://theme-mode-builder.netlify.app/

Features: #

🚀 Cross platform: mobile, desktop, browser
❤ Simple, powerful, intuitive API
🛡 Null Safety
🔋 Batteries included

📚 How to Use #
Table of contents #

Video
Guide

Video: (A bit outdated, for v0.0.3) #






Guide: #
First run the initialization which is asynchronous so you will need to change the return type of your main() method from void to Future<void>:
Future<void> main() async {
/// ensure widgets are initialized
WidgetsFlutterBinding.ensureInitialized();

/// initialize theme mode builder
await ThemeModeBuilderConfig.ensureInitialized();

/// Runs the app :)
runApp(MyCoolApp());
}
copied to clipboard
Then just wrap your MaterialApp widget with the ThemeModeBuilder and return the MaterialApp widget from the builder.
The builder gives you two arguments, builder: (BuildContext context, ThemeMode themeMode) {}.
Pass the themeMode to themeMode on your MaterialApp.
Now this code below explains better than I do 🙈🚀😂:
import "package:flutter/material.dart";
import "package:theme_mode_builder/theme_mode_builder.dart";

class MyCoolApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ThemeModeBuilder(
builder: (BuildContext context, ThemeMode themeMode) {
return MaterialApp(
title: "My Cool App",

/// here is the `themeMode` passed form the `builder`
themeMode: themeMode,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.light,
seedColor: Colors.red,
),

/// put your light theme data here
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: Colors.deepPurple,
),

/// put your dark theme data here
),
home: Home(),
);
},
);
}
}
copied to clipboard
If you want to change the themeMode you just call: #
await ThemeModeBuilderConfig.toggleTheme();
copied to clipboard
And the theme will change instantly given you followed the steps above correctly 🎉.
Want more customization? #
To change to dark mode:
await ThemeModeBuilderConfig.setDark();
copied to clipboard
To change to light mode:
await ThemeModeBuilderConfig.setLight();
copied to clipboard
To change to system mode:
await ThemeModeBuilderConfig.setSystem();
copied to clipboard
To get the theme mode you can run: #
final ThemeMode themeMode = ThemeModeBuilderConfig.getThemeMode();
copied to clipboard
Finally, To check if the current theme is dark or not, you use this simple call: #
final bool isDarkTheme = ThemeModeBuilderConfig.isDarkTheme();
copied to clipboard

License

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

Share

• Share on Facebook
• Share on Twitter