loading spinner with image_picker_web (FLUTTER-WEB)

Question

How can I incorporate a loading spinner in a image_picker_web application that only triggers as an image is selected?

The best I have been able to do is a spinner triggered by the 'select image' button, as below, but this shows a spinner when the the directory is opened i.e. before anything is selected, I need it to trigger when the user selects an image and hits 'open' in the directory.

Image pickedImage;
bool isWaiting = false;

  pickImage() async {

setState(() {
  isWaiting = true;
});

Image fromPicker =
    await ImagePickerWeb.getImage(outputType: ImageType.widget);

if (fromPicker != null) {

  setState(() {
    isWaiting = false;
    pickedImage = fromPicker;
  });

}

}

 RaisedButton(
              onPressed: () => pickImage(),
              child: isWaiting
                  ? SizedBox(child: Image.asset('assets/spinner.gif'))
                  : Text('Select Image'),
            ),

(adapted from the original example: https://pub.dev/packages/image_picker_web/example)

Answer 1

1. You can use the default material CircularProgressIndicator(), if you want.

2. If you want it a little more colorful with google color accents, you can go with my ColoredCircularProgressIndicator() package.

3. If you want a custom spinner then you have to definitely go with this awesome package - flutter_spinkit

Your implementation is correct, you can also use GestureDetector with Material widget for input button customizations.

EDIT -

As mentioned in comment, if you want the spinner to kick-in AFTER the image is picked, you can use then() from getImage's future and a void callback to achieve this.

Image fromPicker = await ImagePickerWeb.getImage(outputType: ImageType.widget).then(() => /* do something after image is picked (change widget to spinner in setState) */ );

I really don't know why you want to kick-in the spinner AFTER not before.

Also, image_picker_web package is now deprecated so use the image_picker package with web check.