使用 image_picker_web (FLUTTER-WEB) 加载微调器

Question

如何在 仅在选择图像时触发的 image_picker_web 应用程序中加入加载微调器？

我能做的最好的事情是由“选择图像”按钮触发的微调器，如下所示，但这会在打开目录时显示微调器，即在选择任何内容之前，我需要它在用户选择一张图片并在目录中点击“打开”。

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'),
            ),

（改编自原始示例：https://pub.dev/packages/image_picker_web/example）

Answer 1

1. 如果需要，您可以使用默认材质 CircularProgressIndicator()。

2. 如果您希望它带有谷歌颜色口音，更加丰富多彩，您可以使用我的ColoredCircularProgressIndicator() 包。

3. 如果你想要一个自定义微调器，那么你一定要使用这个很棒的包 - flutter_spinkit

您的实现是正确的，您还可以使用GestureDetector 和Material 小部件来自定义输入按钮。

编辑 -

如评论中所述，如果您希望在选择图像后启动微调器，您可以使用来自getImage's future 的then() 和一个 void 回调来实现此目的。

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

我真的不知道你为什么要在之后而不是之前启动微调器。

另外，image_picker_web 包现已弃用，因此请使用 image_picker 包进行网络检查。