GitXplorerGitXplorer
Y

theme_mode_builder

public
7 stars
1 forks
0 issues

Commits

List of commits on branch main.
Unverified
e9b61d993f3c942b6826b0abfb7f11890c37598a

Release for 2.0.0 🚀

YYazeedAlKhalaf committed 8 months ago
Unverified
3192bb342385b7d06eabd8b93999daddc032a686

recreate web to support wasm

YYazeedAlKhalaf committed 8 months ago
Unverified
66d74b2f108392d5f3a34c0dcc70b85f8bab8b18

update docs and README.md

YYazeedAlKhalaf committed 8 months ago
Unverified
5cba538b123c001b9a2b157f431d652e942152b9

we have a new implementation, alot of breaking changes inside :D

YYazeedAlKhalaf committed 8 months ago
Unverified
97fed4a7d304aa59268b2bf20c56d1e82769f5b4

make the package work with latest flutter version and upgrade all deps :D

YYazeedAlKhalaf committed 8 months ago
Unverified
59a8e7ce721ad5d91e5be2ca3144f5c292dd522c

❌ Remove unused imports

YYazeedAlKhalaf committed 3 years ago

README

The README file for this repository.

Theme Mode Builder 🚀

Pub Version GitHub GitHub Issues GitHub Pull Requests

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

  1. Video
  2. 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());
}

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(),
        );
      },
    );
  }
}

If you want to change the themeMode you just call:

await ThemeModeBuilderConfig.toggleTheme();

And the theme will change instantly given you followed the steps above correctly 🎉.

Want more customization?

To change to dark mode:

await ThemeModeBuilderConfig.setDark();

To change to light mode:

await ThemeModeBuilderConfig.setLight();

To change to system mode:

await ThemeModeBuilderConfig.setSystem();

To get the theme mode you can run:

final ThemeMode themeMode = ThemeModeBuilderConfig.getThemeMode();

Finally, To check if the current theme is dark or not, you use this simple call:

final bool isDarkTheme = ThemeModeBuilderConfig.isDarkTheme();