GetX vs Riverpod | Which is better with Flutter❓

do you really think that adding get x package slows down your application and using the flutter recommended river pod makes it super fast in today's video we're gonna compare get x and river pod side by side this comparison is going to be based on three factors so first we'll be comparing the size of the application then the performance in terms of frame per second and the memory utilization and then we will be comparing the coding structure we follow inside getx and riverport without any further due let's get started with today's topic [Music] so first we will start with the size comparison for that you have to go to the terminal window and write down this command flutter build ios you can also build for android doesn't really matter and say analyze size once you run this command it's going to give you the json file which contains all the information of your application packages and the classes variables everything all right so i'm going to script to the part where it provides the json file it will take couple of seconds now here you can see we got the json so basically the idea is you're going to copy the json file from this directory and keep it somewhere accessible so i have created one folder and i kept both the json file from the get x version of the application and the river port version and kept it here and i did the same for android as well so i have total four files all right let's go ahead and try to compare these two json files and remember you have to run the same command on the other project as well which i have already created so what i'm going to do now quickly is open the dart dev tool which you can fire up from here all right uh why it generated the second one okay so here we have the dot dev tool you have to open the app size tool okay go to the div section where it's gonna show the difference between two json files all right and first i'm gonna drop the river part version here and then i will drop the get x version on this side make sense and we'll hit analyze the difference so you can clearly see that the get x version is taking 16.5 kb extra so it's not mb it's not even 100 kb it's just 16.5 kb but although get x is taking a little bit extra so this point we're gonna give to the river pod okay let's go a little bit deep inside the size comparison you can check which are the points where get x has increased the size so you can go here inside framework and app and you will see that the get package is taking 111 kilobytes extra the flutter package also increased little bit because of that the dart async method and so on now interestingly you can see what are the things has decreased between the river pod and get x version so it will show you inside the framework app river pod has reduced 39 kb means like in the get x version you are not using the package so 39 kb got reduced here 40k 48kb reduced for the source span and you can also visualize this thing by clicking up here so these are the sections where it got reduced and it's a good idea to take a combined view so you can visualize and get the clear idea which package has gained the size and which package has reduced you can go up to a variable level about size comparison all right so this point goes to the river pod let's move to the next point where we're gonna compare the performance of application let me just take a moment to thank all the subscribers of the channel the members who are supporting continuously and all the followers who are writing lovely comments so i'm really thankful and especially the members who are contributing on a monthly basis so you can also take membership of channel codex by clicking the join button i'll put link in the description and that way you will help channel codex and also motivate me to create more awesome content back to the video so to measure the performance of application we have to run the application in profile mode so let's go ahead and do that and if you don't see the profile option you can click on dart and flutter and it will generate all the different modes of your application so i'm going to select the profile mode and you also have to make sure that the real device has selected i have my iphone 7 connected to the system so now let me just fast forward and skip to the part where application is built and ready seems good now the application is running let's go ahead and analyze the application on dev tool side by side all right so now i'm going to open up dot dave tool so that we can see the performance real time and here we have it okay so as i interact with the application you're gonna notice all the frame time like how much time it takes to render the frame if it is blue or light blue it is fine if it goes to the orange or the red part means there's a jank issue happening and we can figure out what api what method is taking time we can go a little bit deep inside that but this video i'm not going to cover that in detail but we'll see how does it work with get x and river parts so let's go ahead and start searching for hotel in mumbai the city from where i belong okay and now you can see that here when search is complete and the layout is updating there's a jank happening right the orange one which is quite fine like just just a way to look at the flame chart but we are not here to solve this issue or make like uh fix the problem of this tank we are just comparing how does it perform with the river pod and with get x so you can see clearly that it is running on a 58 frame per second on average at this point of time so let's try to scroll the list view and see if there's any further lag or something and there was a big lag initially so let's go ahead and see here when we scrolled here you can clearly see that again there's a big layout issue happening what is taking the most of the time is the layout and the paint because we are using a network image so if you remove the network image this issue will fix but we just want to analyze which we just want to compare with the real-time scenario that's why i added all this uh image purposely but it is performing still fine with 46 frames per second and because if there's a idle time you're gonna see this jank behavior and remember it also matters which device and with what battery level with what internet speed you are running so now let's try to navigate to a different page so i'm gonna move to the detail page and go back you can check the memory graph as well once you're interacting with the application how many times the garbage collector is firing how much allocation is happening how the memory is getting released and all those things we can compare with the get x version so let me go ahead and capture a screenshot of just swiping or scrolling the list view now all the blue dots you are seeing here is a garbage collector instance and this thing are memory allocation so over the time it kept allocating a lot of memory which is not going to be used and the garbage collector fired and it has released all the memory so the less number of time garbage collector fires it's good for application performance so i've just opened the get x application real quick and we're gonna run this in profile mode again so here we have the profile mode selected the device is iphone and let's give it a run meanwhile it's running i just want to give you this brief that state management comes in picture only when you're updating data when you're interacting with some ui update but a lot of time people get confused when you add a reverb package or when you add a get x package your application becomes slow by default this happens that happens so let me just tell you a friendly that this is all myths because until and unless you're using some part of that package some class references are there flutter is going to remove all the unwanted classes all the unwanted references from your release bill so it's not like if you add a river pod or if you add get x package your application is going to become slow all right so i have cleared everything just like i did with the river pod now i'm going to start searching for a different city so let me just type in mumbai again this time and i will just hit the search button so we are running at 59 frame per second which is really a good number now as i said that it depends on the current state of your device as well like what is the battery level what is the network uh strength you have so it it is not totally depending on the application but how many applications you are running in the background what are they performing at the moment like is there any background fetch happening for other application is your app is updating behind the scene some other apps are updating so all those factor also impact on this frame per second rate so currently we're getting 59 frame per second now it became 54 when i started scrolling which is fine okay we are still on the same number what we have seen on the provider side and now when i am navigating back and forth and this time i'm using the get version right to navigate from one page to other so there was little bit lag in the initial navigation when i first time moved to the detail page there was a couple of junk happening now it came to 52 frame per second so both of the river pod and get x is giving a quite same performance in terms of frame per second so we can also see the memory utilization and we'll try to compare because there's nothing much to compare it's a very small application we don't have so much of memory leaks and these and that to compare but at least we will get a snapshot what is happening here how much memory it's allocating is it freeing up or not or it's just keeping in the memory so here you can see when i scroll there's a garbage collector firing up and it's trying to collect all the unwanted resources and when you navigate here i can see that the garbage collector is firing less often which gives a better uh performance because your execution is not interrupted so there's no significant difference between the river pod and the get-x version of the application in terms of performance and memory utilization we can use either of them it totally depends on how well you have written your user interface how will you have optimized your memory but the package is not impacting anything on the memory or performance side so for this comparison i'm going to give point to both of them now let's move to the third comparison which is the code structure all right so what you're looking at is get x and river pod application side by side which have the same functionality it's a hotel search application and we are looking at the main file right now you can see it has run app with the my app widget and here you have to wrap that inside of provider scope what it means that all the providers are available globally so inside any widget you can call any provider that's why you have to wrap your my app inside a provider scope whereas in get x what you do is instead of using material app you use get material and this you only have to do if you want to use a navigation system from get package if you just want to use the state management you don't really need to do get material app you can just leave it as material app all right here inside the river pod application on the right hand side you can define all the providers right here because these are available uh you know in a global scope so i have defined in the main file you can also separate in a different separate file so let's go ahead and analyze the home page which is the main page of our application here in the get export what you see is a controller instance now in get x generally we have a controller attached to each page so that there's a view controller relation and whatever you want to change inside that page basically you bind that with the controller whereas inside provider you have each widget or each functionality bind with the provider or riverbot you can say so here what basically we are doing we are listening to the changes inside hotels provider and remember this hotel provider come from the main file whereas inside a get x you have to wrap your widget with obx so that it will keep listening for the changes and the moment the data is changed it will automatically update the widget for you you don't have to make your widget as a consumer widget which you have to do in case of a river pod all right now the interesting part here is this search field you can notice when you click on a search button it is very simple implementation that you say from this controller invoke the search method it's as simple as that but whereas in riverport if you have to implement something like this you have to use the reference remember which we created with the build method and then read the provider find out the notifier and then fire up the search method so here i have opened the get x controller on the left hand side and the provider is on the right hand side you will see the implementation looks quite similar there's not much difference only thing that here i'm passing the input as a parameter whereas inside a get x version i'm just taking it from the controller so now it is totally optional thing it's just a different way of implementation here it is tightly coupled and you can make it loosely coupled by passing a parameter as well it's not something the gatex recommend but you can play around with that okay here inside a get x controller your list of hotel is just one of the variable which is reactive so you can have multiple of them and you can control your page based on those reactive variables but whereas inside a provider your entire provider is based on one type so if you want to control the loading circular progress bar or something like that for that you have to create a different notifier because this notifier works only with the list of photos and apart from that the core part where it's fetching data from internet remains same for both of the methods so there's nothing different of course inside a get x version you can use get connect whereas in the river part version you have to use http dio or any other library although the code looks very similar still i will give this point to get x maybe i'm biased or something with the syntax of it but i really love the way that one page is tied up with one controller and you can play around with the different variables you can keep changing them listen for that change inside a ui file whereas for provider you have to create a different provider for different functionality maybe it it's useful in some of the case but generally when we write mobile application we create login page signup page so you want to control entire page from one controller rather than having a different state changing uh providers i hope this comparison was helpful in some or the other way so make sure to give this video a like and write on your feedback or comments or what you feel about get x and river pod in the comment section below and if you want optional thing you can subscribe the channel codex and if you are doing so so make sure to press the bell icon as well and if you want to learn more about get x or you want to understand the basics of flutter you can click these two videos right here i will see you guys in the next one

Channel: CodeX

Views: 33,911

Keywords: flutter, tutorial, how to, android, ios, ui, getx, riverpod, provider, state management flutter, null safe, rapid API, flutter tutorial, state management, mobile, flutter 2.10, update

Id: mxkhUYC5yF8

Length: 16min 20sec (980 seconds)

Published: Thu Mar 31 2022