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，如答案所示，但仍然如此，显示暂停进度状态。在此处查找代码：https://github.com/bipinvaylu/MovieMaker-Flutter/commit/43b317efc9fdbc6e67cf36b16e4350587bf517ae

Answer 1

我对modal_progress_hud软件包采取了略有不同的方法，该软件包包装了您希望使其成为模态的小部件（带有进度指示器）。异步调用返回后，您将关闭进度指示器。然后可以播放电影。

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

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

1 个答案: