Hi, Welcome to COT. In my previous article on Flutter, I explained How to use Java or Kotlin with Flutter to develop more powerful applications in Flutter. I will use some of concepts we studied there in this article.
Today, we will talk about automatically building widgets when something in background is completed, and it affects the UI, or what you see on the screen.
To understand this article, you should have basic understanding of stateful widgets. Let me remind you. Stateful widgets are the widgets whose UI changes when any information in their State object changes.
You must remember that we have to call setState() function to build, or update the widget(or UI) again. We call setState() when a button is pressed, or gesture is given. But, what when the action is heavy, like you are loading data from server or file system, and it is taking random amount of time, no fixed time. In that situation, you need something which calls setState() automatically, when the background process is completed.
Flutter has in-built Widget to solve this problem. It is called FutureBuilder, remember everything is widget in Flutter. It automatically calls setState(), and also provides facility to show some other things like loader etc when you are loading data from server.
FutureBuilder() takes two arguments, future, and builder. Very simple, isn't it ? . See the code below. Function _invokeNative() calls a Kotlin function called getNames, which reads names of files in a folder. We will understand the code.
future:
This takes Future. As you can see I have given it a function which returns Future. What is Future?. Well, to understand it fully, you have to understand asynchronous programming in Dart. But for now, let me me explain you its basics.
Asynchronous functions in Dart:
Normally when you call a function in any programming language, they first execute the function completely and return something. Meanwhile, they do not execute next statements under that function call. It comes in synchronous operations.
Dart provides facility of asynchronous operations. That means, you can execute statements under function call, when the function is executing.
async: It is used to declare asynchronous functions.
Future:
Future stores data returned by an asynchronous function. It can have two states, complete, or uncompleted. You can also specify what type of data Future is going to store, like String, List etc. My Future function in above code does not return anything, so I have given void type to it.
await: It is is used to get complete result of asynchronous functions. That means, platform.invokeMethod() is also an asynchronous function, which returns a list returned by Kotlin/Java function named 'getNames'.
Here is the Kotlin function which returns a list of filenames-
As you can see, it is returning an ArrayList which contains file names read from myDirectory directory.
Today, we will talk about automatically building widgets when something in background is completed, and it affects the UI, or what you see on the screen.
To understand this article, you should have basic understanding of stateful widgets. Let me remind you. Stateful widgets are the widgets whose UI changes when any information in their State object changes.
The Problem when building Widgets in Flutter:
You must remember that we have to call setState() function to build, or update the widget(or UI) again. We call setState() when a button is pressed, or gesture is given. But, what when the action is heavy, like you are loading data from server or file system, and it is taking random amount of time, no fixed time. In that situation, you need something which calls setState() automatically, when the background process is completed.
A Solution, Build in Future, FutureBuilder:
Flutter has in-built Widget to solve this problem. It is called FutureBuilder, remember everything is widget in Flutter. It automatically calls setState(), and also provides facility to show some other things like loader etc when you are loading data from server.
FutureBuilder() takes two arguments, future, and builder. Very simple, isn't it ? . See the code below. Function _invokeNative() calls a Kotlin function called getNames, which reads names of files in a folder. We will understand the code.
future:
This takes Future. As you can see I have given it a function which returns Future. What is Future?. Well, to understand it fully, you have to understand asynchronous programming in Dart. But for now, let me me explain you its basics.
Asynchronous functions in Dart:
Normally when you call a function in any programming language, they first execute the function completely and return something. Meanwhile, they do not execute next statements under that function call. It comes in synchronous operations.
Dart provides facility of asynchronous operations. That means, you can execute statements under function call, when the function is executing.
async: It is used to declare asynchronous functions.
Future:
Future stores data returned by an asynchronous function. It can have two states, complete, or uncompleted. You can also specify what type of data Future is going to store, like String, List etc. My Future function in above code does not return anything, so I have given void type to it.
await: It is is used to get complete result of asynchronous functions. That means, platform.invokeMethod() is also an asynchronous function, which returns a list returned by Kotlin/Java function named 'getNames'.
Here is the Kotlin function which returns a list of filenames-
builder:
Builder argument takes a function with 2 parameters, context, and snapshot. This function specify what should happen when the asynchronous operation is in different states. We can check if the operation is done using snapshot.connectionState. If it is not done, then we can show a circular loader.
ListView.builder builds a list dynamically. It is not our topic for this article, I will explain it in upcoming Flutter articles.
Thanks for reading this article. If you have any suggestion, or any doubt, please comment below.
2 Comments
Such a great article
ReplyDeleteThank you so much MR. MINION for your love.
Delete