Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Dart

Flutter Future, Await, and Async – All You Need To Know

July 21, 2020
in Dart, Developers Point
6 min read
flutter future async await

Here’s everything you need to know about the Flutter Future, Await, and Async.

RELATED FLUTTER RESOURCES

How To Prompt User To Update App In Flutter

How To Create and Run Dart Code in Console Using VSCode?

Understanding Flutter forEach(), map(), where()

Flutter is written using Dart, and Dart is a single-threaded language. This means that a Flutter app can only do one thing at a time, but it does not mean that Flutter apps are forced to wait for slower processes.

ADVERTISEMENT

Flutter apps use an event loop. This should come as no surprise since Android has a main looper and iOS has a run loop (aka main loop). Heck, even JavaScript devs are unimpressed since JavaScript itself has a … wait for it … event loop. Yes, all the cool kids are using an event loop these days.

An event loop is a background infinite loop which periodically wakes up and looks in the event queue for any tasks that need to run. If any exist, the event loops put them onto the run stack if and only if the CPU is idle. As your app is running instructions, they run serially – one after another. If an instruction is encountered that may potentially block the main thread waiting on some resource, it is started and the “wait” part is put on a separate queue.

Why Would It wait?

Certain things are slow compared to the CPU. Reading from a file is slow. Writing to a file is even slower. Communicating via Ajax? Forget about it. If we kept the waiting activity on the main thread, it would block all other commands. What a waste!

The way this is handled in JavaScript, iOS, Android, and now Dart is this:

  • An activity that is well-known to be slow is started up as normal.
  • The moment it begins waiting for something – disk, HTTP request, whatever – it is moved away from the CPU.
  • A listener of sorts is created. It monitors the activity and raises an alert when it is finished waiting.
  • The reference to that listener is returned to the main thread. This reference object is known as a Future.
  • The main thread continues chugging along its merry way.
  • When the waiting activity is finally resolved, the event loop sees it and runs an associated method (aka. a callback
    function) on the main thread to handle finishing up the slow event.

All you do is write the code to create the future and to handle futures that are returned from other methods:

// Say goReadAFile() is slow and returns a Future
Future myFuture = goReadAFile();

In Dart you have the ability to specify the type of thing that Future will give you eventually:

Type of futureWhen it’s ready, I’ll have a …
Future<String>… string
Future<Foo>… Foo
Future<Map<String, dynamic>>… Map whose keys are Strings and whose values are dynamic

When we have that Future object, you may not have the data, but you definitely have a promise to get that data in the Future. (See what they did there?)

  • How to use the Flutter GridView.count, GridView.extent

How do we get the data from a Future?

You tell the Future what to do once the data is ready. Basically, you’re responding to a “Yo, the data is ready” event and telling the Future what to do by registering a function.

myFuture.then(myCallback);

The .then() function is how you register that callback function. The callback should be written to handle the promised data. For example, if we have a Future, then our callback should have this signature:

void myCallback(Foo theIncomingData) {
doSomethingWith(theIncomingData);
}

So if the Future will return a Person, your callback should receive a Person. If the Future promises a String, your callback should receive a String. And so forth.

Your callbacks should always return void because there’s no way that the .then function can receive a returned value. This makes a ton of sense when you think about it because remember that it is no longer running within the main thread of your app so it has no way of merging back in. So how do you get a value from the callback? Several methods, but the most understandable is that you use a variable that is defined outside the callback:

class FooState extends State<FooComponent> {
String _firstName; // <-- A variable known by the whole class
Widget build(BuildContext context) {
// return a widget
}
void _myCallback(String someVar) {
_firstName = someVar; // <-- Getting a value OUT of an async callback
}
}

Tacking a .then() onto your Future object can occasionally muddy up your code. If you prefer, you can clean it up a bit with await.

await

There’s another way to get the data which is more straightforward to read. Instead of using .then(), you can await the data.

Foo theIncomingData = await somethingThatReturnsAFuture();

Awaiting pauses the running code to … well … wait for the Future to resolve before it moves on to the next line. In the preceding example, the “Foo” that you’re awaiting is returned and put into theIncomingData. Simple. Or maybe it isn’t that simple…

async

Like it or not, when you use await inside a function, that function is now in danger of blocking the main thread, so it must be marked as async. For example, this function;

Bar someFunction() {
Foo theIncomingData = someFunction();
return new Bar();
}

becomes this when we await

Future<Bar> someFunction() async {
Foo theIncomingData = await somethingThatReturnsAFuture();
return new Bar();
}

Note that when we added an await on that second line, we must mark the function itself with async. The subtle thing is that when it is marked as async, anything returned from that function is immediately wrapped in a Future unless it is already one.

Are you sitting down? Check this out: whenever you choose to await a future, the function must be marked as
async, and therefore all who call it must be awaited and they must be marked as async and so on. Eventually you get to a high enough spot in the call chain that you’re not in a function so you don’t have to mark it as async. Maybe I spoke too soon when I said this is simpler.

NOTE: The Flutter build() method cannot be async, but events like onPress can. So try to steer your async activities into events to solve this recursive async-await-async-await thing.

Here are your Futures takeaways:

  1. Futures allow your Dart code to be asynchronous – it can handle slow-running processes in a separate thread (kind
    of).
  2. You can handle the callbacks of those things with either a .then(callback) or by awaiting them.
  3. If you await in a function, that function must be marked as async

RelatedFlutter Resource

How To Prompt User To Update App In Flutter
Dart

How To Prompt User To Update App In Flutter

August 16, 2020
How To Create and Run Dart Code in Console Using VSCode?
Dart

How To Create and Run Dart Code in Console Using VSCode?

August 10, 2020
forEach map where flutter
Dart

Understanding Flutter forEach(), map(), where()

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
FLUTTER-FUTUER-APP-DEVELOPMENT
Dart

Why Google Flutter Is the Future of Mobile App Development

July 12, 2020
cross axis alignment and main axis alignment
Developers Point

Difference between the Flutter CrossAxisAlignment and MainAxisAlignment

June 28, 2020
Next Post
Understanding the Flutter COntainer

Container Widget & Box Model in Flutter - All You Need To Know

custom fonts text style flutter

Flutter Custom Fonts and How to Style Text

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

flutter google map embed

Trying To Embed Google Map to your Flutter App? Here’s The Solution

June 24, 2020

How to remove debug banner in flutter on android emulator?

August 8, 2020
Flutter Tab Bar

How to Create a Tab Bar/Tab Controller/Bottom TabBar in Flutter

July 14, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In