Asynchronous Task — Flutter

Show some love for Dart

Basically Dart performs well in both synchronous and asynchronous tasks. But when your app lifts some heavy work in a synchronous way, It gets lagged. The frames get delayed.

Think that you have a use-case, that your app calls an Http request to your server on the main thread and you got 2 seconds delay in response. Your screen frames got frozen (stop rendering frames).

In that scenario async in dart will be really handy for you. And dart provides easy implementation on async logics. Let us have an example and try to implement async logics.

First I had created a basic flutter app, with two Animated buttons and Text widgets. The code looks like this,

@override
void initState() {
  super.initState();
  _controller =
      new AnimationController(vsync: this, duration: Duration(seconds: 3));
  _controller.repeat();
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: <Widget>[
          Positioned(
            child: Center(
              child: Text(
                _secondsTracker.toString(),
                style: TextStyle(fontSize: 150),
              ),
            ),
          ),
          Positioned(
            bottom: 10,
            left: 10,
            child: FloatingActionButton.extended(
              onPressed: () {
              },
              label: Row(
                children: <Widget>[
                  AnimatedBuilder(
                      animation: _controller,
                      child: Icon(
                        Icons.sync,
                        color: Colors.white,
                      ),
                      builder: (BuildContext context, Widget _widget) {
                        return Transform.rotate(
                          angle: _controller.value * 6.3,
                          child: _widget,
                        );
                      }),
                  SizedBox(width: 10,),
                  Text('Main Thread')
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 10,
            right: 10,
            child: FloatingActionButton.extended(
              onPressed: () {
              },
              label: Row(
                children: <Widget>[
                  AnimatedBuilder(
                      animation: _controller,
                      child: Icon(
                        Icons.sync_problem,
                        color: Colors.white,
                      ),
                      builder: (BuildContext context, Widget _widget) {
                        return Transform.rotate(
                          angle: _controller.value * 6.3,
                          child: _widget,
                        );
                      }),
                  SizedBox(width: 10,),
                  Text('Back Thread')
                ],
              ),
            ),
          )
        ],
      ),
    ),
  );
}

We will write a function that delays or sleeps for 2 seconds, in such a way we can simulate the delayed response discussed above.

static int delayMessage(int seconds) {
  sleep(Duration(seconds: seconds));
  return seconds;
}

Then, just call this function in the onpressed of a first FAB button.

_secondsTracker += delayMessage(2);
setState(() {});

Now you got the output like this,

The above image gets lagged as it sleeps for 2 seconds in the main thread, so our UX opf the app really gets busted. But Don’t worry dart will help you.

Create another function, like this,

Future<int> spawnSeconds(int seconds) async {
  var delayedSeconds = await compute(delayMessage, seconds);
  return delayedSeconds;
}

See, there is async & await. That makes the app wait but not creates another thread. You also need to see that compute function call. It is an api for Isolates. Isolates are responsible for background tasks and threading in the dart.

Now in your second FAB button, inside onpressed braces, call the above function.

_secondsTracker += await spawnSeconds(2);
setState(() {});

Now your app will run smoothly, like this,

I know, my grammar is a bit hard to understand. Please clone the repository and run the project. you will understand for sure.

manojvirat457/background_tasks

Hope, it was helpful,

Thanks from,

Build for Billions