Flutter show Progress HUD while doing background task - dart

Question

I am making movie maker app where i am showing progress hud when creating movie from list of videos.But Progress HUD progress indicator UI stuck at starting point. Following is my code:
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});
}
Here, I am starting movie creation when a user taps on Create Movie action button and showing progress HUD but it is not working as expected, It's showing just like here.
Updated code to use modal_progress_hud 0.0.6, As suggested in answer But it's still, showing hanging progress hud. Find code here: https://github.com/bipinvaylu/MovieMaker-Flutter/commit/43b317efc9fdbc6e67cf36b16e4350587bf517ae

Answer 1

I take a slightly different approach with the modal_progress_hud package which wraps the widget you wish to make modal (with a progress indicator). After the async call returns you turn off the progress indicator. You can then play the movie.
No matter which package you use, I would probably switch to another widget to play the movie triggered by a call to setState() after making a call to stop the progress indicator. Playing the movie before the original async call completes may be preventing the progress indicator from stopping. Food for thought.