Best Flutter Async Loading Packages and Examples

To create a responsive app, whether targeting Android or iOS, it is imperative to do time consuming and intensive tasks asynchronously. In this article we check some of the best async loading packages for flutter and how to use them. The advantage of using such packages is that through them you avoid doing intensive work in the UI thread, which would be a practice since such tasks could freeze the user interface.

(a). async_loader

A flutter plugin for loading content asynchronously.

Example

Step 1: Installation

To use this plugin, add async_loader as a dependency in your pubspec.yaml file.

Depend on it

Run this command:

With Flutter:

 $ flutter pub add async_loader

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  async_loader: ^0.1.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Step 2: Import it

Now in your Dart code, you can use:

import 'package:async_loader/async_loader.dart';

Step 3: Write Code

Create instance

getMessage() async {
  return new Future.delayed(TIMEOUT, () => 'Welcome to your async screen');
}
...
var _asyncLoader = new AsyncLoader(
    key: _asyncLoaderState,
    initState: () async => await getMessage(),
    renderLoad: () => new CircularProgressIndicator(),
    renderError: ([error]) =>
        new Text('Sorry, there was an error loading your joke'),
    renderSuccess: ({data}) => new Text(data),
);

Trigger reload

class ExampleApp extends StatelessWidget {
  final GlobalKey<AsyncLoaderState> _asyncLoaderState =
      new GlobalKey<AsyncLoaderState>();
  reload() {
      _asyncLoaderState.currentState.reloadState()
  }
}

Full Example

Here is a full example of how to use this package:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:async_loader/async_loader.dart';
void main() {
  runApp(new ExampleApp());
}
class ExampleApp extends StatelessWidget {
  final GlobalKey<AsyncLoaderState> _asyncLoaderState =
      new GlobalKey<AsyncLoaderState>();
  @override
  Widget build(BuildContext context) {
    var _asyncLoader = new AsyncLoader(
      key: _asyncLoaderState,
      initState: () async => await getMessage(),
      renderLoad: () => new CircularProgressIndicator(),
      renderError: ([error]) =>
          new Text('Sorry, there was an error loading your joke'),
      renderSuccess: ({data}) => new Text(data),
    );
    return new MaterialApp(
        title: 'Async Loader Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          appBar: new AppBar(title: buildTitle('Async Loader Demo')),
          body: new Center(child: _asyncLoader),
          floatingActionButton: new FloatingActionButton(
            onPressed: () => _asyncLoaderState.currentState
                .reloadState()
                .whenComplete(() => print('finished reload')),
            tooltip: 'Reload',
            child: new Icon(Icons.refresh),
          ),
        ));
  }
}
const TIMEOUT = const Duration(seconds: 5);
getMessage() async {
  return new Future.delayed(TIMEOUT, () => 'Welcome to your async screen');
}
buildTitle(String title) {
  return new Padding(
    padding: new EdgeInsets.all(10.0),
    child: new Text('Async Loader Demo'),
  );
}

Reference

API reference

Repository (GitHub)

(b).async_builder

Improved Future and Stream builder for Flutter.

This package provides AsyncBuilder, a widget similar to StreamBuilder / FutureBuilder which is designed to reduce boilerplate and improve error handling.

It also provides InitBuilder, which makes it easier to start async tasks safely.

Installation

1. Add to dependencies

In your pubspec.yaml add the async_builder as a dependency:

dependencies:
  async_builder: ^1.2.0

2. Import

Then import its classes:

import 'package:async_builder/async_builder.dart';
import 'package:async_builder/init_builder.dart';

AsyncBuilder Examples

Future

AsyncBuilder<String>(
  future: myFuture,
  waiting: (context) => Text('Loading...'),
  builder: (context, value) => Text('$value'),
  error: (context, error, stackTrace) => Text('Error! $error'),
)

Stream

AsyncBuilder<String>(
  stream: myStream,
  waiting: (context) => Text('Loading...'),
  builder: (context, value) => Text('$value'),
  error: (context, error, stackTrace) => Text('Error! $error'),
  closed: (context, value) => Text('$value (closed)'),
)

Note that you cannot provide both a stream and future.

AsyncBuilder Features

Separate builders

Instead of a single builder, AsyncBuilder allows you to specify separate builders depending on the state of the asynchronous operation:

waiting(context) - Called when no events have fired yet.
builder(context, value) - Required. Called when a value is available.
error(context, error, stackTrace) - Called if there was an error.
closed(context, value) - Called if the stream was closed.

If any of these are not provided then it defaults to calling builder (potentially with a null value).

Error handling

AsyncBuilder does not silently ignore errors by default.

If an exception occurs and error is provided, the widget will rebuild and call that builder. Otherwise, if error is not provided and silent not true then the exception and stack trace will be printed to console (default behavior).

Initial value

If initial is provided, it is used in place of the value before one is available.

RxDart ValueStream

If stream is a ValueStream (BehaviorSubject) holding an existing value, that value will be available immediately on first build.

Stream pausing

The StreamSubscription for this widget can be paused with the pause parameter, this is useful if you want to notify the upstream StreamController that you don't need updates.

InitBuilder

InitBuilder is a widget that initializes a value only when its configuration changes, this is extremely useful because it allows you to safely start async tasks without making a whole new StatefulWidget.

The basic usage of this widget is to make a separate function outside of build that starts the task and then pass it to InitBuilder, for example:

static Future<int> getNumber() async => ...;
build(context) => InitBuilder<int>(
  getter: getNumber,
  builder: (context, future) => AsyncBuilder<int>(
    future: future,
    builder: (context, value) => Text('$value'),
  ),
);

In this case, getNumber is only ever called on the first build.

You may also want to pass arguments to the getter, for example to query shared preferences:

final String prefsKey;
build(context) => InitBuilder.arg<String, String>(
  getter: sharedPrefs.getString,
  arg: prefsKey,
  builder: (context, future) => AsyncBuilder<String>(
    future: future,
    builder: (context, value) => Text('$value'),
  ),
);

The alternate constructors InitBuilder.arg to InitBuilder.arg7 can be used to pass arguments to the getter, these will re-initialize the value if and only if either getter or the arguments change.

Example

Here's a full example:

import 'dart:async';
import 'dart:math';
import 'package:async_builder/async_builder.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'AsyncBuilder Example'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          AsyncTestChild1(),
          AsyncTestChild2(),
          AsyncTestChild3(),
          AsyncTestChild4(),
        ],
      ),
      backgroundColor: Colors.blueGrey.shade600,
    );
  }
}
class AsyncTestChild1 extends StatefulWidget {
  @override
  _AsyncTestChild1State createState() => _AsyncTestChild1State();
}
class _AsyncTestChild1State extends State<AsyncTestChild1> {
  Future<int> randomNumber;
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    return TestCard(
      title: 'Random Numbers - Future',
      desc: 'This example completes a future with a random number after 2 seconds.',
      child: Row(children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: const Text('Generate'),
          onPressed: () {
            setState(() {
              randomNumber = Future.delayed(const Duration(seconds: 2), () => Random().nextInt(100));
            });
          },
        ),
        const Padding(padding: EdgeInsets.only(right: 16)),
        if (randomNumber != null) AsyncBuilder<int>(
          waiting: (context) => const CircularProgressIndicator(),
          builder: (context, i) => Text('$i', style: textTheme.headline6),
          future: randomNumber,
        ),
      ]),
    );
  }
}
class AsyncTestChild2 extends StatefulWidget {
  @override
  _AsyncTestChild2State createState() => _AsyncTestChild2State();
}
class _AsyncTestChild2State extends State<AsyncTestChild2> {
  StreamController<int> randomNumber;
  void initController() {
    setState(() {
      randomNumber?.close();
      randomNumber = StreamController<int>();
    });
  }
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    return TestCard(
      title: 'Random Numbers - Stream',
      desc: 'This example adds a random number to a stream after 1 second.',
      child: Row(children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: const Text('Reset'),
          onPressed: randomNumber == null ? null : () {
            setState(() {
              randomNumber = null;
            });
          },
        ),
        const Padding(padding: EdgeInsets.only(right: 8)),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: const Text('Add'),
          onPressed: () async {
            if (randomNumber == null) initController();
            final ctrl = randomNumber;
            await Future<void>.delayed(const Duration(seconds: 1));
            ctrl.add(Random().nextInt(100));
          },
        ),
        const Padding(padding: EdgeInsets.only(right: 16)),
        if (randomNumber != null) AsyncBuilder<int>(
          waiting: (context) => const CircularProgressIndicator(),
          builder: (context, i) => Text('$i', style: textTheme.headline6),
          stream: randomNumber.stream,
        ),
      ]),
    );
  }
}
class AsyncTestChild3 extends StatefulWidget {
  @override
  _AsyncTestChild3State createState() => _AsyncTestChild3State();
}
class _AsyncTestChild3State extends State<AsyncTestChild3> {
  StreamController<int> randomNumber;
  void initController() {
    setState(() {
      randomNumber?.close();
      final ctrl = StreamController<int>();
      randomNumber = ctrl;
      final timer = Timer.periodic(const Duration(milliseconds: 500), (timer) {
        ctrl.add(Random().nextInt(100));
      });
      ctrl.onCancel = timer.cancel;
    });
  }
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    return TestCard(
      title: 'Random Numbers - Closing',
      desc: 'This example continuously adds numbers to a stream until it is closed.',
      child: Row(children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: Text(randomNumber == null ? 'Start' : 'Restart'),
          onPressed: initController,
        ),
        const Padding(padding: EdgeInsets.only(right: 8)),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: const Text('Close'),
          onPressed: randomNumber == null || randomNumber.isClosed ? null : () {
            setState(() {
              randomNumber.close();
            });
          },
        ),
        const Padding(padding: EdgeInsets.only(right: 16)),
        if (randomNumber != null) AsyncBuilder<int>(
          waiting: (context) => const CircularProgressIndicator(),
          builder: (context, i) => Text('$i', style: textTheme.headline6),
          closed: (context, i) => Text('$i (Closed)', style: textTheme.headline6),
          stream: randomNumber.stream,
        ),
      ]),
    );
  }
}
class AsyncTestChild4 extends StatefulWidget {
  @override
  _AsyncTestChild4State createState() => _AsyncTestChild4State();
}
class _AsyncTestChild4State extends State<AsyncTestChild4> {
  StreamController<int> randomNumber;
  var pause = false;
  void initController() {
    setState(() {
      randomNumber?.close();
      final ctrl = StreamController<int>();
      randomNumber = ctrl;
      Timer timer;
      void start() {
        timer = Timer.periodic(const Duration(milliseconds: 500), (timer) {
          ctrl.add(Random().nextInt(100));
        });
      }
      ctrl.onPause = () => timer.cancel();
      ctrl.onCancel = () => timer.cancel();
      ctrl.onResume = start;
      start();
    });
  }
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    return TestCard(
      title: 'Random Numbers - Pausing',
      desc: 'This example continuously adds numbers to a stream but allows the subscription to be paused.',
      child: Row(children: [
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Colors.blue,
            textStyle: const TextStyle(color: Colors.white),
          ),
          child: Text(randomNumber == null ? 'Start' : 'Restart'),
          onPressed: initController,
        ),
        const Padding(padding: EdgeInsets.only(right: 16)),
        Text('Pause', style: textTheme.subtitle2),
        Switch(value: pause, onChanged: (b) {
          setState(() {
            pause = b;
          });
        }, activeColor: Colors.blue),
        const Padding(padding: EdgeInsets.only(right: 16)),
        if (randomNumber != null) AsyncBuilder<int>(
          waiting: (context) => const CircularProgressIndicator(),
          builder: (context, i) => Text('$i', style: textTheme.headline6),
          stream: randomNumber.stream,
          pause: pause,
        ),
      ]),
    );
  }
}
class TestCard extends StatelessWidget {
  final String title;
  final String desc;
  final Widget child;
  const TestCard({this.title, this.desc, this.child});
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    return Card(
      child: Padding(padding: const EdgeInsets.all(8), child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(
            child: Text(title, style: textTheme.headline6),
            padding: const EdgeInsets.symmetric(vertical: 8),
          ),
          const Divider(),
          Text(desc, style: textTheme.subtitle1),
          const Padding(padding: EdgeInsets.only(bottom: 16)),
          child,
        ],
      )),
    );
  }
}

Reference

Find compltere doc and example here.

(a). async_loader

Step 1: Installation

Step 2: Import it

Step 3: Write Code

Create instance

Trigger reload

Full Example

Reference

(b).async_builder

Installation

AsyncBuilder Examples

Future

Stream

AsyncBuilder Features

Separate builders

Error handling

Initial value

RxDart ValueStream

Stream pausing

InitBuilder

Example

Reference

Leave a Reply Cancel reply