How do we use the Notification class in Flutter? In this section we will use Notification class in many ways.
Firstly, we will use it to pass a custom color scheme across the Flutter app. As a result we have to use the ValueNotifier class in accomplishing the task.
In addition we’ll also use the dynamic color package to build a dynamic color.
Secondly, we’ll use it within the app widget tree. As an outcome the child widget listens to the notification by using a NotificationListener.
Let’s run the app to understand how the Notification class in Flutter works.
Here goes the output.
As we said before, we have controlled the custom color with the help of the ValueNotifier class.
However we could not do that without the Provider package which we have added as dependencies in the “pubspec.yaml” file.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
provider: ^6.0.2
material_color_utilities: ^0.1.4
dynamic_color: ^1.1.2
google_fonts: ^2.3.1Notification class, Flutter and Provider
And to set the dynamic theme across the whole app, we have used the Notification class in the theme model.
But to send it through across the whole app, we need to define it in the entry point of the app.
final settings = ValueNotifier(ThemeSettings(
sourceColor: Colors.pink,
themeMode: ThemeMode.system,
));
void main() => runApp(
ChangeNotifierProvider(
create: (context) => CountingTheNumber(),
builder: (context, _) => DynamicColorBuilder(
builder: (lightDynamic, darkDynamic) => ThemeProvider(
lightDynamic: lightDynamic,
darkDynamic: darkDynamic,
settings: settings,
child: const FlutterMaterial(),
),
),
),
);To understand this mechanism, we need to start with the custom theme class.
Let’s see the full code.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:material_color_utilities/material_color_utilities.dart';
class ThemeSettingChange extends Notification {
ThemeSettingChange({required this.settings});
final ThemeSettings settings;
}
class ThemeSettings {
ThemeSettings({
required this.sourceColor,
required this.themeMode,
});
final Color sourceColor;
final ThemeMode themeMode;
}
class ThemeProvider extends InheritedWidget {
const ThemeProvider(
{super.key,
required this.settings,
required this.lightDynamic,
required this.darkDynamic,
required super.child});
final ValueNotifier<ThemeSettings> settings;
final ColorScheme? lightDynamic;
final ColorScheme? darkDynamic;
Color custom(CustomColor custom) {
if (custom.blend) {
return blend(custom.color);
} else {
return custom.color;
}
}
Color blend(Color targetColor) {
return Color(
Blend.harmonize(targetColor.value, settings.value.sourceColor.value));
}
Color source(Color? target) {
Color source = settings.value.sourceColor;
if (target != null) {
source = blend(target);
}
return source;
}
ColorScheme colors(Brightness brightness, Color? targetColor) {
final dynamicPrimary = brightness == Brightness.light
? lightDynamic?.primary
: darkDynamic?.primary;
return ColorScheme.fromSeed(
seedColor: dynamicPrimary ?? source(targetColor),
brightness: brightness,
);
}
ShapeBorder get shapeMedium => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
);
CardTheme cardTheme() {
return CardTheme(
elevation: 0,
shape: shapeMedium,
clipBehavior: Clip.antiAlias,
);
}
ListTileThemeData listTileTheme(ColorScheme colors) {
return ListTileThemeData(
shape: shapeMedium,
selectedColor: colors.secondary,
);
}
AppBarTheme appBarTheme(ColorScheme colors) {
return AppBarTheme(
elevation: 0,
backgroundColor: colors.surface,
foregroundColor: colors.onSurface,
);
}
TabBarTheme tabBarTheme(ColorScheme colors) {
return TabBarTheme(
labelColor: colors.secondary,
unselectedLabelColor: colors.onSurfaceVariant,
indicator: BoxDecoration(
border: Border(
bottom: BorderSide(
color: colors.secondary,
width: 2,
),
),
),
);
}
BottomAppBarTheme bottomAppBarTheme(ColorScheme colors) {
return BottomAppBarTheme(
color: colors.surface,
elevation: 0,
);
}
BottomNavigationBarThemeData bottomNavigationBarTheme(ColorScheme colors) {
return BottomNavigationBarThemeData(
type: BottomNavigationBarType.fixed,
backgroundColor: colors.surfaceVariant,
selectedItemColor: colors.onSurface,
unselectedItemColor: colors.onSurfaceVariant,
elevation: 0,
landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
);
}
NavigationRailThemeData navigationRailTheme(ColorScheme colors) {
return const NavigationRailThemeData();
}
DrawerThemeData drawerTheme(ColorScheme colors) {
return DrawerThemeData(
backgroundColor: colors.surface,
);
}
ThemeData light([Color? targetColor]) {
final colorScheme = colors(Brightness.light, targetColor);
return ThemeData.light().copyWith(
//pageTransitionsTheme: pageTransitionsTheme,
colorScheme: colorScheme,
appBarTheme: appBarTheme(colorScheme),
cardTheme: cardTheme(),
listTileTheme: listTileTheme(colorScheme),
bottomAppBarTheme: bottomAppBarTheme(colorScheme),
bottomNavigationBarTheme: bottomNavigationBarTheme(colorScheme),
navigationRailTheme: navigationRailTheme(colorScheme),
tabBarTheme: tabBarTheme(colorScheme),
drawerTheme: drawerTheme(colorScheme),
scaffoldBackgroundColor: colorScheme.background,
useMaterial3: true,
);
}
ThemeData dark([Color? targetColor]) {
final colorScheme = colors(Brightness.dark, targetColor);
return ThemeData.dark().copyWith(
colorScheme: colorScheme,
appBarTheme: appBarTheme(colorScheme),
cardTheme: cardTheme(),
listTileTheme: listTileTheme(colorScheme),
bottomAppBarTheme: bottomAppBarTheme(colorScheme),
bottomNavigationBarTheme: bottomNavigationBarTheme(colorScheme),
navigationRailTheme: navigationRailTheme(colorScheme),
tabBarTheme: tabBarTheme(colorScheme),
drawerTheme: drawerTheme(colorScheme),
scaffoldBackgroundColor: colorScheme.background,
useMaterial3: true,
);
}
ThemeMode themeMode() {
return settings.value.themeMode;
}
ThemeData theme(BuildContext context, [Color? targetColor]) {
final brightness = MediaQuery.of(context).platformBrightness;
return brightness == Brightness.light
? light(targetColor)
: dark(targetColor);
}
static ThemeProvider of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<ThemeProvider>()!;
}
@override
bool updateShouldNotify(covariant ThemeProvider oldWidget) {
return oldWidget.settings != settings;
}
}
Color randomColor() {
return Color(Random().nextInt(0xFFFFFFFF));
}
// Custom Colors
const linkColor = CustomColor(
name: 'Link Color',
color: Color(0xFF00B0FF),
);
class CustomColor {
const CustomColor({
required this.name,
required this.color,
this.blend = true,
});
final String name;
final Color color;
final bool blend;
Color value(ThemeProvider provider) {
return provider.custom(this);
}
}In the above code, we see that Theme Settings Change class passes one parameter which is Theme Settings.
As a result, the Theme Settings class defines two properties that expect custom colors and theme mode.
However, for the body part of the app, we have used Notification class in flutter in a different way.
Notification class, Flutter and Provider
In the body section, the Notification class in flutter works in a different principle.
Let’s see the code first. After that we’ll discuss the code.
class FlutterMaterial extends StatelessWidget {
const FlutterMaterial({Key? key}) : super(key: key);
static const String _title = 'Flutter 3.0 Notification & Material 3';
@override
Widget build(BuildContext context) {
final theme = ThemeProvider.of(context);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme.dark(settings.value.sourceColor),
title: _title,
home: const FlutterMaterialHome(),
);
}
}
class FlutterMaterialHome extends StatelessWidget {
const FlutterMaterialHome({Key? key}) : super(key: key);
static const List<String> _tabs = <String>['Pages', 'Categories'];
static const List<String> _pages = <String>[
'Home',
'About',
'Contact',
];
static const List<String> _categories = <String>[
'Flutter',
'Dart',
'Algorithm',
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
// Listens to the scroll events and returns the current position.
body: NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollNotification) {
if (scrollNotification is ScrollStartNotification) {
} else if (scrollNotification is ScrollEndNotification) {}
// Return true to cancel the notification bubbling.
return true;
},
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: const Text('Flutter 3.0 Notification & Material 3'),
pinned: true,
floating: true,
bottom: TabBar(
tabs: _tabs.map((String name) => Tab(text: name)).toList(),
),
),
];
},
body: TabBarView(
children: <Widget>[
ListView.builder(
itemCount: _pages.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text(_pages[index]));
},
),
ListView.builder(
itemCount: _categories.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text(_categories[index]));
},
),
],
),
),
),
),
);
}
}In the above code, a Notification Listener widget listens to the Scroll Notification notifications.
As a result, when a scroll event occurs in the Nested Scroll View widget, it gets the notification and changes the tab.
Certainly we will develop the code to build a push Notification app.
So stay tuned.
Leave a Reply