Flutterexperts

Themes are a subject group frequently discussed while making applications. The most usually utilized term in regards to this point would be ‘dark theme’. You can frequently see individuals requesting how to deal with a dark theme in your application or any event, similar to requesting how to oversee various symbols for various themes.

Flutter has, however, greatly eased the process of customizing themes and their components. In this article, we will explore how to implement theming using Riverpod state management in your Flutter applications.

In this tutorial, I only show you how to change the theme according to system mode using the Switch button.

For Hooks Riverpod:

hooks_riverpod | Flutter Package
Run this command: With Flutter: $ flutter pub add hooks_riverpod This will add a line like this to your package’s…pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents::

Introduction

Implementation

Code Implement

Conclusion

---

---

Introduction:

This demo video shows how to implement theming theme in Flutter and shows how a theming will work using the hooks_riverpod package in your Flutter applications. We will show a user switches the button then the theme will be changed from light mode to dark mode/vice versa. It will be shown on your device.

Demo Module::

---

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^latest version

Step 2: Add the assets

Add assets to pubspec — yaml file.

assets:
  - assets/

Step 3: Import

import 'package:hooks_riverpod/hooks_riverpod.dart';

Step 4: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called themes.dart inside the lib folder.

First, let’s create our darkTheme and Light Theme. To do that, we can create a new class called themes. dart.

import 'package:flutter/material.dart';

class Themes {
  static final lightTheme = ThemeData(
    brightness: Brightness.light, // For light theming
    scaffoldBackgroundColor: Colors.grey.shade100,
    appBarTheme: AppBarTheme(
        backgroundColor: Colors.grey.shade100,
        titleTextStyle: const TextStyle(color: Colors.black, fontSize: 12),
        centerTitle: false),
// you can add more
  );

  static final darkTheme = ThemeData(
    brightness: Brightness.dark, // For dark theming
    scaffoldBackgroundColor: Colors.grey.shade900,
    appBarTheme: const AppBarTheme(
        backgroundColor: Color(0x00049fb6),
        titleTextStyle: TextStyle(color: Colors.white, fontSize: 18),
        centerTitle: false),
// you can add more
  );

}

Create a new dart file called themes_provider.dart inside the lib folder.

Let’s create our provider file to do that we can create themes_provider.dart. In this example, we will use StateNotifier.

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final themesProvider = StateNotifierProvider<ThemesProvider, ThemeMode?>((_) {
  return ThemesProvider();
});

class ThemesProvider extends StateNotifier<ThemeMode?> {
  ThemesProvider() : super(ThemeMode.system);
  void changeTheme(bool isOn) {
    state = isOn ? ThemeMode.dark : ThemeMode.light;
  }
}

Create a new dart file called main.dart inside the lib folder.

Now, time to create our main. dart file. We should extend ConsumerWidget instead of StatelessWidget to use WidgetRef. Also, ensure you add the root of our app ProviderScope as shown below. Otherwise, you are not going to be able to use providers.

Presently, time to make our main. dart file. We ought to extend ConsumerWidget rather than StatelessWidget to utilize WidgetRef. Likewise, ensure you add the root of our application ProviderScope as displayed underneath. If not, you won’t have the option to utilize providers.

import 'package:flutter/material.dart';
import 'package:flutter_theming_riverpord_demo/splash_screen.dart';
import 'package:flutter_theming_riverpord_demo/themes.dart';
import 'package:flutter_theming_riverpord_demo/themes_provider.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(child: MyApp()),
  );
}


class MyApp extends ConsumerWidget {
  const MyApp({
    super.key,
  });
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeModeState = ref.watch(themesProvider);
    return MaterialApp(
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      themeMode:themeModeState,
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

Create a new dart file called home_screen.dart inside the lib folder.

Lastly, we need to create our HomeScreen(). To do that we create a home_screen.dart file. And as I said before you can create everything into main. dart. We use Switch Widget to change

import 'package:flutter/material.dart';
import 'package:flutter_theming_riverpord_demo/themes_provider.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class HomeScreen extends ConsumerWidget {
  const HomeScreen({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeModeState = ref.watch(themesProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Flutter Theming Riverpod Demo",
          style: TextStyle(fontSize: 18),
        ),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              "assets/logo.png",
              height: 200,
              width: 300,
            ),
            Text(
              "Change Theme $themeModeState",
              style: const TextStyle(fontSize: 18),
            ),
            Consumer(
              builder: (context, ref, child) {
                return Switch(
                    value: themeModeState == ThemeMode.dark, //false or true
                    onChanged: (value) {
                      ref.read(themesProvider.notifier).changeTheme(value);
                    });
              },
            ),
          ],
        ),
      ),
    );
  }
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

---

Conclusion:

In the article, I have explained the Implement Theming Using Riverpod in a flutter; you can modify this code according to your choice. This was a small introduction to Implementing Theming Using Riverpord On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Implement Theming Using Riverpod in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on implementing Theming Using the hooks_riverpod package in your Flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---