Isolates in Flutter | Simplified

in this video we're gonna talk about isolates how isolates are created how it works on a different thread and how to implement that inside dot language hello and welcome back my name is afzil and you're watching channel codex meanwhile I'm setting up a basic flutter application and creating a home page let me talk about the isolates in other languages like Java and c-sharp you must have heard about the trading or task which runs on a different thread so that your main UI thread is not blocked but in Dart we have only one thread Yes you heard me right everything you are performing is happening on a main UI thread you may have written I think a weight which you know holds execution for one task and give priority to other tasks but that also running on a main thread I will show you with the example but before we do that let me just set up a basic user interface where I'll create couple off buttons and if you want to skip this part you can radically jump to the part where I start the integration I have added chapter for that but I recommend stick around because these are some tips and tricks which I follow for creating a design like always using a safe area having a scaffold creating a stateless widget if you are new to flutter development of course you're gonna stick around but if you want to jump you're free to do so now basically what I'm doing over here I just created an elevated button and provided title for that which is a text widget and because it's a tutorial I'm not going to follow you know every best practice but it's a good idea to uh you know Implement all the suggestions when you're coding because once you're done you hardly get a time to refactor okay so here we have our first button I'm going to duplicate it couple of times to Showcase different scenario now that looks like a basic structure and before we proceed I'm also going to add assets folder at the root level so don't add in the lab or somewhere else and I'm going to add a gif image now again this is a basic configuration that you have to provide directory of your asset inside a pub spec yaml so with the asset keyword you have to Define you have to provide in which directory it is with what folder name and here basically I'm going to include everything inside a gifs folder so even if I have 5 10 images or gifs it's going to include everything because I have just mentioned the directory name not the specific file name right and you can get rid of all these unnecessary comments if you think so I generally don't like too much comment in the file because uh it it overwhelms you like there's so many things to understand now you can clearly see there's a dependency Dev dependency and flutter which makes a lot of sense cool so let's go ahead and quickly add this bouncing ball GIF which is a nice animation nice gif image I found on a Lottie website I'll put a link in the description for credit and simply I'm going to use inbuilt flutter widget image and just provide this directory here we have a bouncing GIF and now why I added that to Showcase you what happens if you start some task this animation is stopped the reason I added JF because why not I could have shown with a circular progress indicator as well but GIF looks more interesting isn't it okay so our UI is ready let's go ahead and create a complex task this is going to be a very complex task we have a value total and we are returning it you see how complex it is now actually we will add complexity by running this uh loop 1 billion times now you can understand how complex it is going to be 1 billion time it will sum up uh the values in total and then it will return the data so this is actually going to stop the thread stop the main thread for a couple of seconds sometimes five ten seconds as well so let's go ahead and call this on a click of a button and I'm going to print the value once it is completed all right so fingers crossed I'm going to fire a debug console so that we can see the actual result and let's go ahead and click on task one and you see the ball has freezed the ripple effect on the button that also has phrase because it is performing this heavy task let me click again and you will see everything on the UI is freeze because it's performing some heavy tasks now some of you may say that because you didn't use async await the UI is phrased so let's go ahead and try to make our method asynchronous so that we will return a future data and on a click of a button we will be awaiting for the result so let's see whether it freezes the UI or not and again we have the same behavior the ball is stuck the ripple effect everything like the app is freezed meanwhile it is doing the calculation and once the calculation is over uh the ball starts jumping again you see until now you know we just discussed about the question that the UI freezes whenever you run a heavy task and what is the solution for that of course and isolate now when you spawn and isolate when you run a different thread your main UI will still be running and your calculation and every every process will be happening on a different code different thread and it's you know it runs parallely so if your system have two cores uh execution will be divided between Core 1 and code 2. all right so let's see that in action what I'm going to do uh I will try to keep it as simple as possible I'm not going to complicate like on a dart website or some other blogs I have seen because you know it makes horrible like I I used to be afraid of writing isolates before so first thing you have to remember is that your process or the method which you want to execute should be out of any classes that's why I have added this command that home page ended over here and we are writing this method outside the class its independent method it's not inside any of the class that is the first thing you need so that your process can run independently and now when we have what we want to execute let's go ahead and create isolate and I'm going to use spawn method here there are different other methods as well to create isolate but we are not going to get into details of that you can read the documentation about that but just understand that spawn means creating a new instance so you can see that spawn method accepts two parameter the first one will be name of our method what is going to be executed so complex task 2 is what we are going to execute and the second parameter is what message you want to pass to this thread so basically you can pass any object as a message but what we are going to pass is a send Port where we should receive the response from isolate now to understand this send Port first you need to understand the receive board so think of receive board as a pipe where one end you know is going to listen and other end is going to speak so there's a pipe one person is going to speak and another person is going to listen through that pipe so we will pass the other end the send port to the isolate so that they can speak into it they can send some information through this port and later on we're gonna listen to that so of course inside your isolate you cannot return data directly you have to send the data on a particular Port where someone will be listening to it now before we start listening let's also put in await over here because spawning an isolate may take some time and remember this a weight is not for getting the response this is just to create and isolate and once we have isolate created we're gonna use the receive port to listen so if you remember the pipe there's one person who is going to speak the send Port through the send port and we are going to listen on the other end and once we get the result we are going to print just like we did in the first example so here it will be result 2 let's go ahead and see both the examples side by side I'm going to clear everything run the task one and you see the football is freeze the animation is freeze and it's doing some task on a main thread right so let's wait for the result I think it's five six second right and the animation started again now if I click task two you will notice the ball is still animating and it is performing the complex task 2 and that's the beauty of isolate now again it will take the same amount of time like five six second to get the result but this time the main UI thread is not stopped and that's a real comparison if you click task one the thread is stopped and if you click task 2 everything is running and your isolate is working separately on a different code on a different thread so far we have seen how to invoke and isolate and how to listen for response but what if you want to pass some information to isolate like you want to pass one image to upload one uh number to calculate or something like that how you're gonna pass that parameter how you're going to listen back the response how you can simplify that with the help of record which is newly introduced in the dot language all of these topics are covered in part two of this video which is available for codex members so if you haven't took a membership yet this is the best time to take a membership and support Channel codex and if you don't want to have a monthly commitment you can buy this video on Kofi page as well I have put a link in the description you can go ahead and check yourself and buy me coffee over there as well that's up to you I hope you like this video make sure to give it a thumbs up subscribe the channel if you're new here take a membership and share with others thank you so much I will see you guys in the next one

Channel: CodeX

Views: 22,131

Keywords: flutter, tutorial, how to, android, ios, ui, flutter isolates, dart isolates, isolates, async await, parallel, execution, background, thread, threading in dart

Id: WFfaaLwLobA

Length: 10min 27sec (627 seconds)

Published: Thu Jul 06 2023