Understanding State Management in Flutter - Foundation

hello my friends and welcome back to another episode of fluffy explained today we want to learn together what is state management we want to talk about what is state we want to go about the basics of state management and at the end we want to talk about different approaches in flutter and in other technologies and now without further ado let's get started so the first question that I want to answer is why is state management important and why is it such a big and huge topic in flutter flutter has its own state management process called set state we will talk about that later more but that leads to like a necessary necessity to manage state all over the place and the computer is nothing else than a state machine right so it complains it works with different states and show the users different possibilities of state so a calculation is nothing else than a combination of states so state management is nothing new it is just getting new defined by Facebook when they come into trouble with a very big bug and now we have a certain approach how we manage this state in our applications and this is why state management is so important to us nowadays now let's begin with defining state state is one part of computer science technology and I figured out here from techno pedia a very good definition and that I will read now for you guys in computer science the state of a program is defined as its condition regarding stored inputs the term state here is used similar to how it is used in science whereas the state of an object for instance as gas liquid solid its current physical make up the state of computer program shows its current values or contents so what does it mean for us you will see now hopefully some Twitter feeds where I asked what is state actually because we talk a lot about state management of is actually state and what I figured out when I bought all the your answers down is state is nothing else than a collection of variables at a certain amount of time called stored inputs in that case from the definition and the state of a computer program shows its current state's current values or contents so why are there reasons for state management well there are plenty of them one of them is state information in a computer or in technology is always very first style that means we have different parts of state we have boolean strings we have objects complex objects different objects so all of this stuff is state that we have to manage and understand the second thing is it is very difficult to obtain so how do you find out where is the state changed from where what are the different boundaries where do you get more information about your state all of these things work I'm more unclear before the state management process happened sometimes not clear structured that is a very good point so that means state is sometimes just a collection of variables that could be in a class or something else history is very hard to track so if you want to jump back in different as time stamps of your state you will get some issues and that leads in the long run to parts and problems that we have to solve so what are the usual trade-offs the more you invest time resources and so on into state management principles you will come into these three points that I will explain now to you and these three points getting bigger and bigger the more you invest into state management so the first point is you will have more concepts to follow right because if you invest into a certain strategy of your architecture you get more boundaries and more rules that you have to follow all of them and that you have to explain to new team members to turn team members that are in your team and to yourself all the time that you are making very concise that you stay all over your application the same way and the same behavior because the worst thing that could happen is you have suddenly to state management ways that you take or even free and you have to distinguish the things and you have to understand all of them the second thing is mostly more boiler plate so boiler plate is code that is not for your functions or your business functions that you want to implement so if you want to create a feature you will have more boiler plate with a very amount with different amounts depending on your state management behavior so if you want to be concise and you invest a lot in state management usually it comes with the trade-off of more boiler plate and the last point is short term productivity and long term productivity short term productivity is if you don't care so much about state management you will of course solve your problems way faster in the beginning and you will have not coming with these starting problems you will not write so much or as much boilerplate as other developers do but in the long run in the long term productivity it could lead to some issues because you maybe have to introduce a state management core principle and that will take time effort and also some costs so these are the two three points of the trade-offs that you can have in state management that you have to be aware of now I want to make a round trip about different technologies of state management that are already existent and I think the famous one is Redux from react former from it was the technology flux from Facebook and Redux was the next generation more or less and now I think they work on a third level that called recoil it is a unidirectional workflow so that means you create a store from the store the data go to a provider that goes to a container goes to a component or is visualized on the client gets an action from the user the action gets reduced by a reducer and the reducer saves the stuff into the store so you see it is always a circle and it's in one direction on the other side I showed you an example of ng rx state management and grx comes from the angular world and is more or less created out of the idea that Redux has but for angular what you can see is here we have also a store we talked with the selectors to the components we create actions that the user dispatch and that gets reduced into the store here we have also side effects that you can see as an effect which goes to services api's and different things and because I know a lot of you love vgs I don't want to miss out the state management system of you called vu X you have there a possibility that you see here where you have three components which dispatch actions the actions gets committed to mutations they change the state and the state gets revisionist in the view components but now let's talk about flutter because it's a flutter channel right so the first thing flutter is declarative declarative means we have a UI and the UI is displayed as a function from the state so that means whenever we run a certain function with the state we get our UI as a relation so that is actually something and this shows us already that we have some kind of state management already in place so the developers of flutter thought about that problem and thought okay we have to have some at least a basic state management principle in place so we can work with that and how is it called it is that set state pattern and the set state pattern most of you will understand and know already we have stayed full and state less widgets I already created a video for that up there in the info box and down in the video description below in a stateful widget we have a state that we track and the state can be mutable so it can change over time and then we have to call set state which is a rate trigger of the build function with that we show on the UI as you know the function of state DUI so with the retrigger of the build function with the new state we create the UI that reflects the current state now that we know how state management works and what flutter provides us already out of the box we want to talk about different packages that you can use a new project to help you with state management and how much the effort is with them so we want to begin the different packages with to provide a package the provider package is created by Ramirez that who created the idea out of the inherited widget that already exists inside of the flutter framework the provider package is very easy to use and it has a very easy core principle at the end but it could lead and in the long run to a lot of boilerplate but today we will talk later more in a different video block business logic component one of the most famous one in flutter because it has a lot of information a very huge fan base and it is very popular in the flat community you can see how the block pattern works in the presentation we have a a UI that triggers an event or dispatches an event to the block the block is calculating and doing the stuff and then send an as in Cronus request to the data or a store and the data sends an asynchronous response back to the block and that computes the state to the UI the next package on our list is the Redux package Redux package comes directly from the react Redux package to flutter and contains the same core principles you have a single source of truth that means one store that contains all the data second state is read-only that means the state is immutable and has to be recreate all the time when you change something inside of the state and last but not least changes are made out of pure functions so yet however the possibility to test them very easily another package that I would like to introduce you is the state's rebuilder States rebuilder gives you the opportunity to work very easily with a state management tool and it also provides you to remove as much boilerplate as possible with the benefit that you have to be very strict in your working there so if you're working with States rebuilder it provides you an architecture that is that you have to follow so I just added these two images which just show you how they work and you can see the state is notifying the UI DUI triggers a state that a said state method somewhere have some side effects and changes the state so pretty easy and you have to benefit to separate the concerns from the UI and the business logic the map X package is one of my favorites because it has multiple stores you have actions that mutate observables the observables notify the reactions giving side effects like for example reading something from a database which fires an action and with that you have the perfect round trip why I love this package so much is the perfect generation the perfect code generation that it provides and as you see most of the packages that I showed you today has the flutter favorite sign and the flutter favorite sign as we all know and as Matt have once explained shows the higher bar of expectation that a flutter team has to a package to make this package a flutter favorite where does it leave us now so we know about state management and all the different packages and now you want to have the answer which one is the right one for you or which one is the best that I should use the best one is which solves your problem and now it highly depends on you if you are a beginner developer in flutter and you would do your first EPS your first steps in the flutter environment I highly encourage you just you set state it is good enough and you will take a long time till you come to the first problems where you have to lift the state up where you come into problems where you have to change all the way down the widget tree and create your own stuff multiple times then I would recommend you to learn one of the packages that I introduce you and stick with it if you're already an experienced developer who has some knowledge about web development most likely or any other state management tools already for example you coming from a Redux the background then I highly encourage you to take the Redux package because it contains already the core principles that you actually need and know and you can introduce that to your team way easier where are the next steps from here on I wanted to create for each of the packages a specific video where I want to talk about the pros and disadvantages of each package once more I also want to talk once more about the set state and I hope you stay with me to that journey and now thank you for your time for you that you watch this video please if you liked the video give it a like subscribe to our channel until the next time enjoy your week guys see ya

Channel: Flutter Explained

Views: 13,621

Rating: 4.8565402 out of 5

Keywords: State management, State, What is state, Why manage state, manage state, state, management, basics of state management, state management start, where to start state managemen, code, flutter, development, flutter tutorial, presentation, learning, flutter state management, bloc pattern, flutter state, state management, flutter state management bloc, state management flutter, flutter state management tutorial, flutter state management redux, flutter state management provider, flutter sdk

Id: B7MwkIh3Kck

Length: 13min 46sec (826 seconds)

Published: Tue Jun 02 2020

Reddit Comments

[u/Akimotoh]

You mentioned the provider package to have quite a bit of boiler plate. I found it to be one of the least complicated state management tools while also having the least amount of boiler plate compared to bloc and redux. Can you show an example on what kind of extra boiler plate it has?

[u/jrheisler]

Great video! I come from a client/server environment, with decades of Windows (and Dos) coding. Obviously state management is very foreign to me. In my world, the window owned it's components, and the window owned it's state, so to speak. And frankly, it was gnarly.

I really like the ability to manage the state of things, with controllers that can inject into the UI where needed, what's needed, but the amount of code, ugh!

I have been doing a lot of code alongs the last 3 months, trying to climb the flutter mountain, which now looks more like a hill, and I ran across Get last week, and rewrote one of the code alongs, basically cutting the code in half. I was wondering where you see a tool like Get fitting into state management? Or am I doing it all wrong?