Dart 在执行后台任务时显示进度HUD

我正在制作一个影音制作应用程序，当我从视频列表中创建电影时，我会在其中显示进度hud。但进度hud进度指示器UI停留在起始点。以下是我的代码：

    class _MyHomePageState extends State<MyHomePage> {
      static List<dynamic> videosPath = List();

      static const MethodChannel methodChannel =
          const MethodChannel('moviemaker.devunion.com/movie_maker_channel');

      String _batteryLevel = 'Battery level: unknown.';
      ProgressHUD _progressHUD;
      bool _loading = false;

      @override
      void initState() {
        super.initState();
    //    _getBatteryLevel();

        _progressHUD = new ProgressHUD(
          backgroundColor: Colors.black12,
          color: Colors.white,
          containerColor: Colors.blue,
          borderRadius: 5.0,
          text: 'Loading...',
          loading: false,
        );
      }

      @override
      Widget build(BuildContext context) {
        Widget child = new Scaffold(
          appBar: new AppBar(
            title: new Text('Movie Maker'),
            actions: <Widget>[
              // action button
              IconButton(
                icon: Icon(Icons.movie_creation),
                onPressed: () {
                  _createMovieSync(videosPath);
                },
              )
            ],
          ),
          body: Stack(children: [_progressHUD, _buildContentSection()]),
          floatingActionButton: new FloatingActionButton(
            onPressed: () {
              debugPrint("Bipin - FAB pressed");
              pickVideos().asStream().listen(_setResults);
            },
            tooltip: "Pick a Video",
            child: new Icon(Icons.add),
          ),
        );

        return child;
      }


  void toggleProgressHUD() {
    setState(() {
      if (_loading) {
        _progressHUD.state.dismiss();
      } else {
        _progressHUD.state.show();
      }
      _loading = !_loading;
    });
  }

void _createMovieSync(List<dynamic> paths) {
    toggleProgressHUD();
    _createMovie(videosPath).then((moviePath) {
      debugPrint("Bipin - _createMovieSync Movie created path: $moviePath");
      _startMovie(moviePath).then((_) {
        debugPrint("Bipin - start movie then");
      }).catchError((error) {
        debugPrint("Bipin - start movie error:");
      }).whenComplete(() {
        debugPrint("Bipin - start movie completed.");
        toggleProgressHUD();
      });
    }).catchError((error) {
      debugPrint("Bipin - Create movie error: ${error.toString()}");
    }).whenComplete(() {
      debugPrint("Bipin - Create movie completed.");
    });
  }

  Future<String> _createMovie(List<dynamic> paths) {
    return Future<String>(() {
      debugPrint("Bipin - Create movie future going to sleep");
      sleep(Duration(seconds: 10));
      debugPrint("Bipin - Create movie future wake up");
      return "FilePath goes here";
    });
//    return methodChannel.invokeMethod('createMovie', {"videoPaths": paths});
  }

  Future<Null> _startMovie(String moviePath) async {
    return Future<Null>(() {
      debugPrint("Bipin - Start movie future going to sleep");
      sleep(Duration(seconds: 10));
      debugPrint("Bipin - Start movie future wake up");
    });
//    debugPrint("Bipin - Created Movie path: $moviePath");
//    return methodChannel.invokeMethod('startMovie', {"moviePath": moviePath});
  }

class\u MyHomePageState扩展状态{
静态列表videosPath=List（）；
静态常量方法通道方法通道=
const MethodChannel（“moviemaker.devunion.com/movie_maker_channel”）；
字符串_batteryLevel='电池电量：未知'；
ProgressHUD_ProgressHUD；
bool\u加载=假；
@凌驾
void initState（）{
super.initState（）；
//_getBatteryLevel（）；
_progressHUD=新progressHUD(
背景颜色：Colors.black12，
颜色：颜色，白色，
容器颜色：颜色。蓝色，
边界半径：5.0，
文本：“正在加载…”，
加载：false，
);
}
@凌驾
小部件构建（构建上下文）{
Widget-child=新脚手架(
appBar：新的appBar(
标题：新文本（“电影制作人”），
行动：[
//动作按钮
图标按钮(
图标：图标（图标。电影制作），
已按下：（）{
_createMovieSync（videosPath）；
},
)
],
),
正文：堆栈（子项：[[u progressHUD，[u buildContentSection（）]），
floatingActionButton：新的floatingActionButton(
已按下：（）{
debugPrint（“Bipin-FAB-pressed”）；
pickVideos（）.asStream（）.listen（_setResults）；
},
工具提示：“选择一个视频”，
子：新图标（Icons.add），
),
);
返回儿童；
}
void toggleProgressHUD（）{
设置状态（）{
如果（_加载）{
_progressHUD.state.disclose（）；
}否则{
_progressHUD.state.show（）；
}
_加载=！\u加载；
});
}
void _createMovieSync（列表路径）{
toggleProgressHUD（）；
_创建电影（videosPath）。然后（（moviePath）{
debugPrint（“Bipin-_createmoviesyncmovie created path:$moviePath”）；
_startMovie（电影路径）。然后（）{
debugPrint（“Bipin-start-movie-then”）；
}).catchError（（错误）{
debugPrint（“Bipin-启动电影错误：”）；
}).完成时（）{
debugPrint（“Bipin-启动电影完成”）；
toggleProgressHUD（）；
});
}).catchError（（错误）{
debugPrint（“Bipin-创建电影错误：${error.toString（）}”）；
}).完成时（）{
debugPrint（“Bipin-创建电影完成”）；
});
}
Future\u createMovie（列表路径）{
返回未来（）{
debugPrint（“Bipin-创建电影未来进入睡眠”）；
睡眠（持续时间：10秒）；
debugPrint（“Bipin-创建电影未来唤醒”）；
返回“文件路径在此”；
});
//return methodChannel.invokeMethod（'createMovie'，{“videopath”：path}）；
}
Future\u startMovie（字符串电影路径）异步{
返回未来（）{
debugPrint（“Bipin-启动电影未来进入睡眠”）；
睡眠（持续时间：10秒）；
debugPrint（“Bipin-启动电影未来唤醒”）；
});
//debugPrint（“Bipin-创建的电影路径：$moviePath”）；
//返回methodChannel.invokeMethod（'startMovie'，{“moviePath”：moviePath}）；
}

在这里，当用户点击

Create movie

action按钮并显示progress HUD时，我开始创建电影，但它没有按预期工作，它的显示方式与这里一样

---

更新代码以使用

modal\u progress\u hud 0.0.6

，如回答中所建议，但它仍然显示挂起的进度hud。在此处查找代码：

我对包装您希望制作modal的小部件（带有进度指示器）的包采取了稍微不同的方法。在异步调用返回后，请关闭进度指示器。然后可以播放电影

无论您使用哪个软件包，在调用停止进度指示器后，我可能会切换到另一个小部件来播放由调用setState（）触发的电影。在原始异步调用完成之前播放电影可能会阻止进度指示器停止。值得思考的是

---

我更新了我的代码以使用

modal_progress_hud

但仍显示挂起的进度hud。您可以在此处找到我的代码：我尝试让进度指示器工作，但遇到了与您最初描述的类似问题。可能有许多原因导致此问题（流式传输视频路径，FutureBuilders在重建时被多次调用，等等。）我建议您查看本文和链接视频，其中讨论了管理状态的选项，以避免重建过多，特别是在应用程序变得更复杂的情况下：