My Notes on Using the ListenableBuilder Widget

In this blog, we are going to take a look at ListenableBuilder, which is available in Flutter 3.10 (master) and we will learn When we should use ListenableBuilder.

In my last blog post, we discussed StatefulBuilder, which is used to avoid rebuilding expensive widgets and only update widgets that need to be updated.

In this blog, we are going to take a look at ListenableBuilder, which is available in Flutter 3.10 (master).

Let’s say we’ve a chat input box and we want to send a message only when some text is entered otherwise, we will keep the button disabled. The normal approach would be to use a StatefulWidget like this:

This code works, but it also updates the Scaffold widget, which we don’t want. We want to update only the ElevatedButton. We can fix these by using ListenableBuilder with a TextEditingController:

We are using TextEditingController because it’s a Listenable object which ListenableBuilder needs as an argument.

The above example only updates the ElevatedButton when something is updated inside the TextEditingController which is our text.

When we should use ListenableBuilder?

You can achieve the same result using ValueListenableBuilder and StatefulBuilder, but both of these require a manual trigger to rebuild.

For ValueListenableBuilder, we need to update the value using a setter, while for StatefulBuilder, we need to use setState({}) from the builder callback.

ListenableBuilder, on the other hand, can be used with any type of Listenable object, including ValueListenable. While ListenableBuilder does not provide the current value of the Listenable, you can easily get the current state of the Listenable object manually inside the builder function.

This is very useful when dealing with Listenable objects with use cases like:

1. TextEditingController to enable/disable buttons

2. ScrollController or PrimaryScrollController where we want to show a scroll-down button until we reached the end of the list.

3. AnimationController to enable/disable the button after the animation is completed,

4. TabController or PageController to update the title of the selected page when a tab is changed or a page is swiped.

5. Third-party package controllers like RefreshController from the pull_to_refresh package.

6. Your own custom controller.

Check this DartPad and don’t forget to run it on the master channel.

https://dartpad.dev/?id=8cb4487d07dfb2e417e8e48c434b9afb&channel=master

Hey there, If you enjoyed this post then would you be able to do me a quick favor and share my latest blog post with your friends and colleagues? I'd really appreciate it and I think it could be valuable to them.

Thank you so much!

Edit: After the stable release of 3.10, the ListenableBuilder becomes the parent class of AnimatedBuilder. This means that ListenableBuilder and AnimatedBuilder now perform exactly the same thing and are used for the same purpose, with only a difference in naming convention.