hey hey folks i like thank you so much for joining and in this today topic we are going to explore how we can you know integrate more backs of a package that is for the state management inflator so we can integrate and use our uh mobx package in our flutter applications to manage our state obviously yeah so there are a lot of things uh to talk about um before that like let me introduce myself so my name is bhaikana uh i have been uh working with flutter like exploring flutter you can say uh since 2017 um just become a google developer expert for filter and dart and beside of that uh also i like flexible exploring things so uh and learning a new text so currently learning a golang 2 so and a big marvel friend so if you want to talk about other than tags so we can you know talk about marvel things for sure upcoming marvel releases so yeah so without resting time let's go let's go and get started so in this talk as we know like we are going to talk about mobax so and a state management so before that what we actually know about state uh like how what do you mean by state that everyone has different maybe a perception about state how uh how the state works and all other stuff for me uh like as as we are you know going to play with the widget and all the stuff so for me state is a information that can be read when the widget is built and it can be changed while its lifetime of the widget so over here using this calculation you can see the application state uh whenever the application will state state you know you know going to change it will run a build method again and it will reflect in your ui so your ui going to change so a piece of information that is our state whenever this is going to change and then how you are going to change so this is a simple definition for the state and there are two types of widgets in clutter one is stateless and then other is a stateful so as you can say a state place widget is kind of a dumb widget it's immutable widget that is not going to change in the lifetime of particular widget the app is running on or not so uh there is no way you can you know in uh mutate that state of particular stateless widget so we also have a stateful widget you can say it is a wise wise widget so we will use a stateful widget if you want to change the state of widget using a substrate method so we have a saturated method and using that method only we can you know change particular variable or particular object and that will reflect our in our ui so it is going to rebuild our build method and it will rerun the ui so that is for the stateful widget and this is how the you know stateful widget works so it has a parent and child child so this is kind of a hierarchy if we have a stateful widget some some kind of example if we say so we have a parent then it has a two child and one child has again one child so there is one you know drawback so in in the earlier version we can you know pass on the object using constructor or and we can you know call a substrate method to you know build up our ui again but that is a drawback if you want to you know uh like render like update our ui from one child to another like as we say a child a or child b from child b we want to update our child a so it is nearly impossible or we have to you know go for to the parent we have to pass some data to the parent and then we have to pass it again to the child a so it is quite difficult to manage this state this manage these logics and all the stuff and it you know become tedious to handle all this stuff so uh it is a kind of a drawback that we uh we uh you know flooded developer where were facing so you know there and there were some solutions available so inherited widget uh one is like from the floater package of sorry wow flutter framework itself so you can directly use inherited widget but it had it had a limited scope then again by the rami uh the provider has come and it it is quite a really popular right now uh one of the package for state management then we also have a redex redux so if you are coming from the javascript background you must have a knowledge about redux or like use to kind of know about redux and then there is a block um one of the you know popular state management package a library for managing the state in florida and then rx so rx is you know kind of for everyone like rx dot rx java rx cortland or whatnot so i was a big fan of rx and my android dev so i'm don't have much experience but i did use the rx a lot in my android applications native android applications and i quite you know started using in rx dart and blog patterns combined in my flat applications too but it it had you know some drawback it was not feeling uh quite good and i was quite confused at uh you know at that time too i was writing too much too much boilerplate code and other stuff too so this is pretty much my condition like uh what should i do what should i not uh uh so i actually you know change my perception about how should i you know manage my state i hope so like so like you know it's a change to other state management package and all other stuff so like one and a half year ago then i met a mob x i was uh simply come across one tweet two about my bags and i just you know try to like learn about it a bit and then i kind of fond of it right now so mobx is uh as we we have written over here it is a simple to connect in the reactive data of your application with the ui so it is simple it is it is really nice natural that you actually can feel that you are writing a less bulletproof code you are directly updating some widget and it will you know directly uh update your sorry it will you are going to directly update your variable or particular state or your particular object and it will uh you know without without your knowing without you do anything else it will update your widget to your ui too so it's quite good you know phil was feeling natural to me then it has a so you know rx some some points from the rx 2 so it was you know quite easy to pick up the mobx for me so it had observables and reactions so what is being consumed is called as observables and where is called as the reactions and whenever the observables that is consumed is going to change all the reactions are going to relearn so this is the simple fundamental of models and this is the core concept of mobx so first as i have talked earlier it is about observables that is going to consume we are going to consume it so whenever this observable is going to change we are going to notify our reactions it will sorry it will notify the reactions and it will you know re-render our ui as a side effect so if you have a ui if you want to show a toast message a snack bar or anything like that a pop-up anything like that so we can uh call using the ex sons and it may also you know fire some accents it is a part of mobx or as well so actions like it will help you to immutate your observables so again it's uh you know going to change something and it will reflect in your ui and the upside so this is a simple mobx triad you can say and this will help you do you know this simple three things and you are good to go with the mobx so yeah so let's learn about mob uh sorry observables so we have to import one package called mobx markets dart so you have to firstly look like download the like uh in in your perspective.yaml file you have to uh define the mobx package and the fluttermobix package and our observable will look like in pure more you know box concept it's like something like this final counter is equal to observable and we are in the observable we are initializing our default value as zero so this is something how the mobx you know observable in mobx look like then here is uh you know our full store so we have a you know default application as a counter counter incremental uh application as our default uh sample of the flutter when we create a floater application so we have our counter class over here that that has a logic of you know changing the value counter value i mean incrementing it so it has a counter like constructor default constructor then a value that is observable and then there is a get value sorry a getter that will going to get a value from the observable and then there is a set of set value to set the value on to the new uh to the observable so again like why we are i was you know talking about a boilerplate code but again this is you know feel like a much more obser you know while playing code to us like why should we choose that so here comes the uh solution that you know uh in most we in mostly we are using a build build runner to generate some code in federal applications so we also have a mobx code gen so that is going to help us you know to generate some uh pre-built like a code for our counters that particular logic so over here we are going to again like import the mobile card uh mavic store dart file then we are we are going to you know our like create one file of counter dot g dot dot it will be automatically created but we are going to say it is a part of counter dot g dot dot so whenever you are going to learn a build runner so it will generate some bullet plate code for you you don't have to write anything extra and then there is a class plus counter is equal to counter base with count dollar counter so it is like counter is equal to counter base is kind of extends like counter extends counter base and width is a mixing with that on dollar counter this dollar counter will come from the counter dot g dot dart file that is general automatically and this one is abs abstract class and we are going to use annotations so over here we are declaring our value this integer as observable so it now becomes observables and we are initializing our value as a zero again like you see if you may feel that it is kind of again a boil blade code but you can actually simplify this code by writing your own live templates that actually i have created so you just have to write store then click enter and your much of the boilerplate code will come over there they are predefined and you can directly go for it like so that kind of stuff you can do uh but you know if you progress it this will go no you know doesn't matter this uh this four extra line that you have to write to again and again uh you can create a live template of course but yeah it will not matter a lot after you get used to these mobx then apart from observables we also have a computed observables so here is a basic basic example of you know a context store so we have in our context we have a first name and last name so we will going to define it as a observable and then we have a computer observable so it is again observable but whenever a first name or or a last name going to change it will automatically update our full name so you don't have to do anything extra you don't have to you know rerun or manually something to update your full name you just update first name or last name anything and it will directly affect your full name and it will render in your reactions so it will affect your reactions too so if you are updating your you are over there using reaction so it will update automatically so you don't have to do anything extra so yeah then we have our accents as we talked about marbux has a three tried like a kind of a triangle stuff so observable reaction and accents so we have accents is it it kind of you know gives uh what what what's say a semantic meaning to our observable so it it will uh allow you know observable to update to the reactions but until unless the this action going to change so we have a one ah counter observable and we are going to use action to increment our counter value so we are performing is performing some action and after this action completes it will update the observable and it will reflect at the ui side or whenever you are using so this is the part of you know this is written in pure mobx stuff so using a code zen it will look like something it will look something like this um so integer value is equal to zero then void increment we are going to use x and annotation and value plus we are simply doing going to do value plus plus sorry i like i actually forgot to close the curly brace and so here is you know a full counter class will look like after writing our logic about incrementing our application so it will look like this so yeah forget about this uh top full line you can reduce it by you know using the live templates and all other stuff so we will only focus on observables and accents so yeah and so it is quite uh useful to you uh like you know helpful to have annotations and then at the end we have reactions so whenever this observable computed and you know going to change it will reflect in the reactions so suppose we have one string called hello world it is observable then this final dispose equal to autorun so we are this autorun is one reaction so it is going to run every time our greeting that is our observable is going to change so initially we have a value as a hello world we are then or you know it is it will as a default value it will surely print a hello world first of all and then we are going to change it to hello mob x okay so it will then automatically rerun this of the reaction and it will print hello mob x so this up it will run automatically so there are multiple reactions available in so in the mob x so something like van if you want to use some conditions so you can use that too so there are lots of reactions available so you can you know check out the dock and and yeah and also do not forget to dispose whenever you are done with the you know whatever like uh when whenever you are done with the reactions like we used to do with our animation controller and all other stuff stream control and and all other stuff so yeah so this is what about early exons and let's you know let's move on to the dl code and like let me like walk through you how you can actually write your code for the mobx so let's jump to the code so i have already actually written a counter application store uh okay my application is not for running sorry

i need to rerun it but let me walk through the code so this is the our mobx uh package uh then our count of uh sorry dot g dot dart file generator file it is over here you don't have to worry about what is written in a over here if you want to you know grasp watch knowledge about it so you can surely take a look into it but if you just want to uh ignore it you can ignore it i i rather so you know i told you to like you can always check it out you know how actually things work in the background so it's good to check it out

then our uh this counter store extends counter store this abstract class and with our counter stone uh this dollar counter store that is coming that it is a mixing and coming from over here this mixing okay and we have abstract class it has a counter observable and an action to increment a workout and count so at the ui side let me walk through you there so we have a column we have observer so this observer is actually a reaction uh inside it it we have a we have it available as a widget so you can as you know in flutter everything is widget so we have it available as a widget so and inside it it is a reaction pure reaction only so whenever this counter we have we are using counter stored counter over here okay so whenever yeah we are updating this counter it will re-render this only particular portion not volt build method only particular person and it will be render only this for um it will you know update our counter so you can see i actually you know uh right create another statement to showcase that so very first time it will going to run our build method then our observer runs this this this observer method builder method so i'm just going to clear this up and i'm just going to implement so you can see it is not going to over here it is not going to build whole build method it is just going to render we render this particular portion so it's quite you know uh performance uh likewise yeah yeah it also focus on the performance too so yeah so this is how the simple counter application look like but in this demo i'm also going to you know showcase how we can also change the theme of using your mobx so i have already defined of theme over here a thin data as a light that nothing for that theme.data and lighting as a light uh team.light okay then we also have flutter also has a theme mode so if you are using system it will directly pick from the system what whatever android system is currently using android or ios yeah so let's first of all create a new class now

i'm going to name it kim store we'll copy it i'm just going to you i have actually already created a live template of my mobx store so i'm just going to simply write store i'm going to paste these name class name theme dot theme underscore dot g

pretty easy right then what i need to do over here i just need to you know change this theme mode and whenever this theme will change it will either pick this one or the this light theme or that thing according to my choice so i'm just simply going to make an observable

and going to use thin

you cannot trust your id right

i'm going to assign a default value as a system

and an action

point change theme

as a property but we are going to pass

just name it more instead and we are just simply going to assign this more within more

for better readability we are going to use expression mode instead and now we are going to run a build on a command so this is how it build another command look likes

oh i forgot two years ago

this is the only thing i don't like about underscore generation you have to you know like write this either remember this uh full command or uh either use aliases to you know sort in this command and you can use directly aliases so it is going to take a bit of time to generate the code so it will generate theme underscore store dot g dot dot file for us and it will have this observable and these actions so in the ui side let me go to the y side meanwhile i'm going to use a you know provider to inject my this themes underscore store to whole application because i want to access it everywhere so i'm going to wrap my this my class this is my app widget with the provider

i'm going to create store

just going to use some formatting over here so yeah looks good so we are now injecting our theme store using a provider so not directly we can use it over here like like this

provided

you can use a different different method of you know provider to get the reader our store read or watch

here here we are injecting our store to our my my class so it is you know it hurt it contains a material app so it will available throughout the applications you can write logic to dispose to over here so if you want to dispose things so you can do it now i'm going to use wrap my material app with observer widget that is uh you know reaction for us but as a widget so it it accepts a context good context uh but as we are not going to use it over here so yeah we will just write underscore over here we are going to use fat arrow over here and we are just going to pass this theme mode uh mode the system instead we are going to pass theme store dot okay so it is now available to a whole material application okay and oh yeah our theme store has been rendered let me just refresh it so our dot g dot dot file has been generated so you can see the code is over here we don't have to write much extra code just these things and you can see the error is also gone now i have already you know created a ui for this so we have a light theme dark thing system buttons it so we have to tap on it and whenever this change with this will going to update our goal so we don't have any kind of action over here so what we will do

we will go to this particular class that we have our methods we are going to use theme store like this

we are going to use the chain dependency as we need a context so for that we are going to use the chain dependency in store and sorry provider we are going to get data using a provider again

knock off

install yeah like this we do have a thing stored now and we are going to access this instant store in this bottom sheet so i i have this bottom strip so i already had these methods commented just to make things sweet quick for us

so we don't have to pass these things like this now as we are defining it globally

so when user clicks on light it we will pass up the light theme then dark theme and the system theme respectively and over here we have a theme store and i have named it as a change thing i do have a typo in my store but yeah we can ignore it as of now and we are passing a mode over here and we are just you know popping up popping out our this bottom seat using a pop method so i'm just going to re-run whole application uh so you know our provider can easily inject our theme store so now uh yeah it has been reminded let me just clear logs

let's click on a dark theme and yeah so you don't have to do anything extra you can use this theme store using a provider or a get it or any kind of diy you want to use and you can just you just have to use this method theme store the change theme and pass your data and it will affect your whole application without doing you know knowing you have to do any kind of manual stuff so this simple thing like mobx is so yeah that's that's it about the live coding stuff yeah so this is pretty me like i do love you know live coding uh like flatter applications on stage i did it i do in most of my presentations so yeah so that's it about you know mobx it was a simple vx reactions and observables and you're good to go so thank you so much and yeah i love you 3000 i picked this uh template from the slides go you know i wanted to make my like this go also like this presentation also beautiful like our flutter application so and yeah so if you have kind of any kind of question so you can ping me uh yeah on my social media accounts at iphone uh it's i buy it everywhere on twitter on facebook on instagram on linkedin everywhere i'm using the same username so you can bring me over there you can ask your questions right away over here yeah yeah thank you so much guys

okay

if you have any kind of questions you can type in in the slider or you can ping me for so anytime

also yeah i do i will share my presentations and in my speaker blog my presentation and respective links so you can get access to mobx uh documentation and all other stuff easily i'll sell my uh one of the git of repository 2 so you can you know see the example for the mobx uh then i actually you know i actually write down a boilerplate code that you can directly use in your application a kind of it has it has some logic for the login api calling and all other stuff network network calls so you can use that easily so i'll sell the respective link with you sooner yep hi balik so there are no no questions and you can say goodbye now to your audience that was an awesome talk thank you very much for being at droidcon apec thank you so much thank you so much for having me and uh goodbye everyone i had take care and merry christmas to you like in advance thank you so much