Value Notifier Flutter and Material Design 3

In our previous Firebase, Provider Blog app section, we have used Material Design 3 to customise the theme. However, at the entry point of our Flutter app, we’ve also used the ValueNotifier class. 

Certainly, in our Flutter app, the ValueNotifier class plays an important role to customize the theme across the whole widget tree.

Now the question is, why do we say so?

Why is the ValueNotifier class so important?

Above all, how have we used this ValueNotifier class?

We’ll discuss these topics in this section.

Firstly, the ValueNotifier is a ChangeNotifier that holds a single value. 

As a result, in our code, we have passed one single value.

Let’s take a look at the code.

import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'model/state_of_application.dart';

import 'model/theme.dart';
import 'view/chat_app.dart';

final settings = ValueNotifier(ThemeSettings(
  sourceColor: Colors.pink,
  themeMode: ThemeMode.system,
));
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => StateOfApplication(),
      builder: (context, _) => DynamicColorBuilder(
        builder: (lightDynamic, darkDynamic) => ThemeProvider(
          lightDynamic: lightDynamic,
          darkDynamic: darkDynamic,
          settings: settings,
          child: ChatApp(),
        ),
      ),
    ),
  );
}
// 

The code is quite straightforward. 

Obviously, when we pass the Theme Settings through the Value Notifier, we want every child widget to listen to the change.

By the way, we have passed the Theme Settings class with two properties.

final settings = ValueNotifier(ThemeSettings(
  sourceColor: Colors.pink,
  themeMode: ThemeMode.system,
));

We’ve defined the Theme Settings in our custom Theme Provider class. 

How does it work?

We’ll certainly discuss in our next section, because this acts as the brain of Material design 3.In summary, the Theme Settings Change class extends the Notification class.

As a result, we can now use these properties to set the custom theme color.

When we want a light color, we can pass that value to the MaterialApp widget’s theme property.

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

//import 'package:google_fonts/google_fonts.dart';

import '../main.dart';
import 'chat_home_page.dart';
import '../model/theme.dart';

class ChatApp extends StatelessWidget {
  ChatApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = ThemeProvider.of(context);
    return MaterialApp(
      title: 'Provider Firebase Blog',
      debugShowCheckedModeBanner: false,
      theme: theme.light(settings.value.sourceColor),
      home: const ChatHomePage(),
    );
  }
}

As a result, the Firebase Provider Blog app will look as follows.

However, once we change it to dark, it looks different.

How Value Notifier Flutter works

In summary, a ValueNotifier is a special type of class.

Firstly, the ValueNotifier extends ChangeNotifier. 

Secondly, a ValueNotifier can hold a single value. The value itself can be of any type. It can be an integer, a String, a bool or your own data type.

In our Firebase Provider Blog app, we certainly have our own type – Theme Settings object.

Finally, when we use a ValueNotifier, it improves the performance of the Flutter app.

Why?

Because the ValueNotifier can help to reduce the number of times widget rebuilds. 

As a result, Widgets that have subscribed to the ValueNotifier get the notification whenever the value is updated.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Flutter, Dart and Algorithm

Twitter