waiting 1.0.3

waiting: ^1.0.3 copied to clipboard

Introduction #

Waiting is a part of any app: loading resources takes time and the user needs to be informed that he has to wait.

This package provides a WaitingWidget: a widget showing a progress indicator, including animations, transitions and customizations.

Getting started #

Add the dependency to your flutter project:

dependencies:
  waiting: ^1.0.0

Import the package:

import 'package:waiting/waiting.dart';

Wrap any widget with WaitingWidget:

WaitingWidget(
  show: _show,
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())));

If the given variable _show is set to true the wrapped widget will be scrimmed (faded out) and overlayed with a circular progress indicator. When _show is set to false again, the wrapped widget returns to its normal state:

See the example for the complete code.

Customization #

Setting the indicator #

To change the indicator, set ìndicator when creating the WaitingWidget.

For example if a Lottie animation should be used as the indicator widget:

WaitingWidget(
          indicator: Center(
              child: SizedBox(
                  width: 100,
                  height: 100,
                  child: Center(
                      child: Lottie.asset("assets/infinite.json")))),
          show: _show,
          child: const Center(
              child: SizedBox(width: 200, height: 200, child: FlutterLogo()))),

the result looks like this:

Setting a timeout #

After a certain period of waiting the user should be informed that the waiting will take longer than expected.

The WaitingWidget offers the parameter timeout to specify a timeout duration after which the user should informed:

WaitingWidget(
  show: _show,
  timeout: const Duration(second: 5),
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())));

The result looks like this:

To specify your own indicator for the timeout, the parameter timeoutIndicator is used:

WaitingWidget(
  show: _show,
  timeout: const Duration(second: 5),
  timeoutIndicator: const Center(child: Text("please wait...")),
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())));

The result looks like this:

Beyond #

The WaitingWidget uses a SceneController and widgets using SceneWidget implementations internally to transist between "scenes".

Check out waiting.dart to see how its done and get inspired.

Also check out the source for the companion presentation presented at the fluttercon 2024 to see how "scenes" can be used to e.g. build a presentation.