Flutter State Management using ValueNotifier and ValueListenableBuilder - No Packages
HTML-код
- Опубликовано: 2 окт 2024
- Dashboard using `ValueNotifier` and `ValueListenableBuilder`.
State Management by using built-in Flutter classes. No Packages.
What is covered
In this project, you are going to take a look at:
- How to use `ValueNotifier` and `ValueListenableBuilder` to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree
- State Management with build-in classes, no packages
The Problem:
- Dashboard app needs to chart espresso, coffee, and latte consumption
- Drawing each bar, the chart needs to refresh independently for performance
The Solution:
- Use the `ValueNotifier` and `ValueListenableBuilder` to allow to selectively rebuild individual widgets for performance
ValueNotifier and ValueListenableBuilder
The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance
1. Create a class that extends `ValueNotifier`
2. Add fields to contain data defining them as `ValueNotifier`
3. Add methods to modify data and call the `notifyListeners()` method
4. Add the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field
How it Works
`ValueNotifier` and `ValueListenableBuilder` - The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance. Use fields to contain data defining them as `ValueNotifier`. Use methods to modify data and call the `notifyListeners()` method. Use the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field.
GitHub: github.com/Jed...
Twitter: / jedipixels
Looking for Updates: JediPixels.dev
Blog Article: jedipixels.dev...
Subscribe: www.youtube.co...
#flutter #fluttertutorial #dart #flutterdev
finally a clear explanation for value notifier..gee thanks
Thanks...
I have used this but i get null error
The following TypeErrorImpl was thrown building ValueListenableBuilder(state:
_ValueListenableBuilderState#daaba):
Unexpected null value.
not able to find the solution for this
I am using the following format:
```ValueNotifier numberOfEspresso = ValueNotifier(0);```
```
ValueListenableBuilder(
valueListenable: dashboardValueNotifier.value.numberOfEspresso,
builder: (BuildContext context, int value, Widget? child) {
debugPrint('numberOfEspresso: ${dashboardValueNotifier.value.numberOfEspresso.value}');
return MoodVerticalBarWidget(
icon: Icons.coffee_maker_outlined,
numberToPlot: dashboardValueNotifier.value.numberOfEspresso.value,
numberToPlotMax: numberToPlotMax,
title: 'Espresso',
);
},
),
```
Thanks is very useful 👍
Thanks...
Impressive 👍