ValueListenableBuilder (Flutter Widget of the Week)

Flutter · 169K views · 2019 · 1:57

Open on YouTube

Software architecture & designWeb developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering Flutter questions about updating the UI without setState or rebuilding whole screens, since it shows ValueNotifier and ValueListenableBuilder in action.

Recommended by 7 people across 8 different months, 2019 to 2025.

What it is

A short Flutter team 'Widget of the Week' episode explaining ValueListenableBuilder, a widget that rebuilds part of the UI whenever a ValueNotifier's value changes. It also shows how it can be used to animate widgets.

What people said

Recommends EdwynZN · 2020-07 · Stack Overflow · on “Passing data from custom widget textfield to a calculator flutter”

[this video] check the video example, you will see they use it when there are a lot of places to change the same value, maybe if you create a gist or another question with a cleaner full code I can help you, right now, there is a lot in this that I am also confused what were you trying to achieve

Recommends Fahim Al Mahmud Ashik · 2020-09 · Stack Overflow · on “Passing data between two unrelated screens in flutter”

You can achieve such kind of filter effect by using ValueNotifier [this video] to hold the changes of the filter class and using a ValueListenableBuilder in the Category class to listen to that value change and do the necessary change in the UI. let's jump to the solution, inside your FiltersScreen , replace this code var _glutenFree = false; var _lactoseFree = false; with ValueNotifier kind of object. So it'll look like this ValueNotifier<bool> _glutenFree = new ValueNotifier(false); ValueNotifier<bool> _lactoseFree = new ValueNotifier(false); Changing the value on click is also pretty similar. So this setState((){ _glutenFree = newValue; }); will change into this setState((){ _glutenFree.value

Recommends pskink · 2021-05 · Stack Overflow · on “How to prevent unnecessary renders in Flutter?”

check `ValueListenableBuilder` documentation (and see [this video] ) but honestly i think that you exaggerate a bit with your performance concerns

Recommends Dc7 · 2021-08 · Stack Overflow · on “Changes not reflecting on adding onto a list in flutter”

User Valuelistenablebuilder [this video] in your list & pass your array/list as value in Valuelistenablebuilder. It will update the list if there is any change happened.

Recommends MendelG · 2022-07 · Stack Overflow · on “How I can update a listview element without set state?”

If you want to rebuild the UI without calling setState , you can use the help of ValueNotifier [LINK] and the ValueListenableBuilder [LINK] widget. Here is a simplified counter app, if you take a look at the console, you'll see that print('build'); is only called initially running the build method and not called again when calling _increment() : import 'package:flutter/material.dart'; void main() => runApp(const MaterialApp(home: PageLoadApp())); final counter = ValueNotifier<int>(0); class PageLoadApp extends StatefulWidget { const PageLoadApp({Key? key}) : super(key: key); @override State<PageLoadApp> createState() => _PageLoadAppState(); } class _PageLoadAppState extends State<PageLoadApp

Recommends Arevan Shamal · 2023-08 · Stack Overflow · on “Force widget rebuild from drawer in Flutter”

@AlexKay could you explain to me one think you want to rebuild while u dismiss the drawer or when u click a button? also the valueNotifier you can use it more and be creative with it and make rebuild when ever in you app is needed you can watch these short explanations : 1- [this video] 2- [LINK] also it might be good to use callback function so u call setState and rebuild the screen you want and be able to access or pass the function so you can trigger it when and where you want

Recommends DevelJoe · 2024-03 · Stack Overflow · on “ValueListenableBuilder: listen to more than one value”

Just a thought, in an example like this, you're probably far better off if you create a custom `ValueNotifier` by extending it; in your case e.g. of a custom class with three properties, `height1`, `height2`, `height3`. Then use a single `ValueListenableBuilder()` which listens to your custom `ValueNotifier`. Check the video here [this video] for details on how to extend `ValueNotifier` to create a custom one.

Recommends pskink · 2025-05 · Stack Overflow · on “In flutter, how to do a partial refresh list?”

'''How can I switch items, change items, or add new items, and only rebuild the corresponding items, instead of the entire tabs component?''' - check ValueListenableBuilder [this video]

Cites Delgan · 2019-12 · Stack Overflow · on “Are "ValueNotifier" + "ValueListenableBuilder" suitable for "many" widgets in Flutter?”

A ValueNotifier [LINK] can be combined with one or several ValueListenableBuilder [LINK] to manage state and ease the development of UI. However, ValueNotifier inherits from ChangeNotifier [LINK] , and the documentation states that: ChangeNotifier is optimized for small numbers (one or two) of listeners. It is O(N) for adding and removing listeners and O(N²) for dispatching notifications (where N is the number of listeners) So, from what I understand, it's not best practice to have multiple ValueListenableBuilder listening on the same notifier. On the other hand, the official video presentation [this video] indicates on the contrary that you can update many widgets at the same time: [LINK] My que

Cites Hossam · 2021-08 · Stack Overflow · on “How can i refresh 'if condition' on widget tree in flutter?”

the reason why if block didn't called because it's only called first time when widget build so when you change it's value later won't call again. there are many solutions the simplest one every time you want change checkDate variable put the statement in setState() like that setState(() => checkDate = false); to ensure that widget create again so the code enter if block or use ValueListenableBuilder it's more efficient [this video]