let's pick up where we left off last time with Fitz we open up the app check some boxes and look at that our app stays still there the boxes are able to be checked and unchecked great but wait the progress bar at the top it's not changing regardless of the boxes that I've checked off what gives [Music] in the last episode Fitz talked about how flutter widgets are immutable they don't change as we're using them in our app they aren't part of an app but they describe exactly how to build an app like a recipe
for building a cake then came the idea of App State any data that would determine how our app's UI appears when users interact with the app the stateless task items were converted into stateful widgets and state was introduced to our exploration planner app so we tried to run our app and check off a few boxes but just as before the progress bar at the top isn't well progressing taking a look at the code we can see why the progress bar doesn't have any state attached the state for each check box is independently stored within each
task item how does the progress bar know about those task item States in other words how does the widget over there get access to the state that's stored over here the answer is it doesn't yet and that's where State management comes in if state is the data that determines our app's UI then State Management is how we organize our app to most effectively access State and share it across widgets now before we continue I want to acknowledge that State Management is a very Hot Topic in the dev Community regardless of framework there's always many solutions
available and everyone seems to have the one that works best for them State Management has two goals one provide access to data and two tell widgets that they need to be redrawn when the data changes State Management is the guardrail layer in between that gives us the ability to do both of those things that's it what's the best State Management solution for flutter well it depends there isn't one single best option there are many options available for State Management and flutter and at the end of the day you'll probably be happy with just about any
of the popular libraries if you're feeling adventurous try out a few of them and decide what works best for you and your projects due to time constraints we'll only be touching on one of flutter's many State Management Solutions in this video for the progress bar to know about the task item States we'll want to lift the task item States up in the widget tree so that the progress bar has access to the task item state enough talking let's get some State Management into our app by adding the flutter riverpod package to our app riverpot is
one of the many State Management packages available for flutter riverpot is built on the premise of having providers or an object that encapsulates a piece of State also known as data and allows listening to that state and consumers which are objects that allow developers to interact with and read from providers instead of storing each task state within the task item we can give it to a provider that we've called task provider to manage a state specifically we're using a state Notifier provider which consumers can listen to It's riverpod's recommended solution for managing state which may
change in reaction to a user interaction perfect for our task items when initializing a provider we gave it a list of tasks along with a task Notifier which is used to allow the UI to modify state from there we'll go to our progress and task list widgets and convert them from stateless and stateful widgets into consumer widgets consumer widgets are a special kind of stateful widget that lets you access providers by giving you access to this ref object within the consumer widgets we can now watch the task provider for any change in these task State
then whenever there's a change in state that widget and all of its children will get rebuilt to reflect our new app State plus because the provider is declared as a global object other widgets in your app will also have access to the provider and task State now whenever we check a checkbox we'll read from our task provider Notifier and toggle the task so what else has changed in our app well we've introduced a task class to make it easier to keep track of individual tasks we added a task Notifier so that UI interactions can modify
our task State we also introduced riverpod to manage date which means instead of using the set State syntax we use slightly different syntax to access the state stored in our provider we also wrapped our entire app in a provider scope a widget that stores all of our providers plus due to our task list being stored as state with the provider our task list build code is significantly more condensed we now iterate through the list of tasks instead of hard coding each task item the data architecture for our app has been changed with the introduction of
riverpod state has been moved out of the widget to our provider but that's it aside from that the recipes for each widget remain the same now that we've gotten our exploration planner working in the next episode we'll take a look at how we can make our exploration planner app look better see you over there [Music]
