[Flutter] Katana Indicator

Hello. My name is Masaru Hirose.

I made a package:

While waiting for Future, display an indicator and do not let it operate

I’ve put together some instructions on how to use it, so if you’re interested, go ahead and give it a try!

katana_indicator

katana_indicator | Flutter package

A package to make it easier to use Flutter’s indicators (especially when waiting for processing in Future).

https://pub.dev

Introduction

When developing applications, it is often necessary to write processes that take some time, such as saving data or logging in on a button onPressed.

Basically, you would have the user wait with an indicator until the process is complete, and then display a dialog or return to the screen when it is complete.

I have created a package that makes it easy to describe the process for this purpose.

Assume that all processes to be executed wait on Future.

It can be easily written as follows

Copy

final future = repository.save(); // Some kind of storage process (return Future<dynamic>)
await future.showIndicator(context); // Displays an indicator and does not allow the user to operate until the process is completed
// Show Dialog

katana_model allows all CRUD operations to wait in Future, so the saving process can be written in a concise manner.

Copy

IconButton(
  icon: Icon(Icons.check),
  onPressed: () async {
    final doc = collection.create();
    await doc.save({
      "first": "masaru",
      "last": "hirose",
      "type": "kanimiso",
    }).showIndicator(context);
    context.router.pop();
  }
);

Installation

Import the following packages

Copy

flutter pub add katana_indicator

How to use

Basically, you just use the extension methods provided by Future.

Copy

final doc = collection.create();
await doc.save({
  "first": "masaru",
  "last": "hirose",
  "type": "kanimiso",
}).showIndicator(context);
context.router.pop();

The indicator CircularProgressIndicator is used by default.

If you wish to change this, use the indicator parameter of showIndicator.

Copy

await doc.save({
  "first": "masaru",
  "last": "hirose",
  "type": "kanimiso",
}).showIndicator(context, indicator: Center(child: LinearProgressIndicator()));

Conclusion

I made it for my own use, but if you think it fits your implementation philosophy, by all means, use it!

Also, I releasing the source here, so issues and PullRequests are welcome!

If you have any further work requests, please contact me directly through my Twitter or website!

Contact - mathru.net | App Development with Flutter, Unity/Music and Video Production/Material Distribution

Offers app development and apps using Flutter and Unity. Includes information on music and videos created by the company. Distribution of images and video materials. We also accept orders for work.