Flutter Isolates : Working with firebase storage on isolates

Hey Folks, Today in this article, I am gonna cover a few things related to flutter isolates that I have learned with the working example.

WHAT IS ISOLATE?

So let's understand what is isolates? How do they work? Why they have been introduced to flutter?
An Isolate is in which our all dart code runs, It consumes a little bit of the memory in the main thread and runs in an event loop. This is what you may have heard at every place.

So in simple words, flutter is a framework that runs on the main thread of the android ( and other platforms), here implementing multi-threading isn’t possible as of now. To resolve this issue Flutter came up with the Isolate Concept. Isolate means to keep something separated from others.

HOW DOES IT WORK?

Thus there is the main thread on which our main Isolate with the UI works and you can create another isolate in which you can carry background work separated from the current main UI.

For more in-depth theory from google, visit the video below:

Now let's get started and jump to the example:

Actual Output:

Preparation Stuff:

In this article, I won’t teach how to connect firebase and your app, there are tons of articles out there. You can read and come back if you don’t know.

pubspec.yaml

Add the required dependencies to the pubspec.yaml
- flutter_isolate
- firebase_core
- image_picker
- firebase_storage

Please refer to the versions here

File Structure

file structure

main.dart

Nothing new here, Just initialize the firebase app in the void main method.

home.dart

This is where our main UI lies and will change dynamically on the upload operation carried out by another isolate. Here used Image Picker to pick the images from the gallery. Used ValueNotifier to update the UI on uploading status changes

constant.dart

Here our two global variables present

isUploading -> hold the status of upload task

which will hold the status of the upload task and other is the

uploadedurl -> actual uploaded image url

upload_isolate.dart

Rough design to get how isolates work

I have already explained what’s going on through comments in each line. Here is the code so you can understand it better

Hope you understand the concept of Isolates and how we can use it in flutter to avoid unnecessary load and delays to our main UI.

During the app, we can parse the JSON to separate isolate to avoid the load in the UI.

A working example can be found here

Flutter boring dev show (Isolates and mulithreading)

Former Scientist Intern at Space Application Centre (ISRO) FullStack Mobile App Developer at Equitysoft Technologies