dart - Flutter 在执行后台任务时显示 Progress HUD

Question

我正在制作电影制作应用程序，当我从视频列表创建电影时，我会在其中显示进度 HUD。但是 Progress 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});
  }

在这里，当用户点击 Create Movie 操作按钮并显示进度 HUD 时，我开始制作电影，但它没有按预期工作，就像这里一样显示。

更新代码以使用 modal_progress_hud 0.0.6，如答案中所建议但它仍然显示挂起的进度 hud。在此处查找代码:https://github.com/bipinvaylu/MovieMaker-Flutter/commit/43b317efc9fdbc6e67cf36b16e4350587bf517ae

Answer 1

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

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