Use progress bar dialog in async task using Future in Flutter - async-await

Question

I want to create common class for execute API. Now i needed to add progress dialog while executing task and after complete task dialog should be dismiss.I google lot but not get appropriate solution So help me to achieve it.
For Http Client i used dio plugin.
Please help me for adding progress dialog in this class so when i create request using this class it added progress dialog while executing task. i create this type of class in java but now i want to add it in flutter.
HttpRequest.dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
class HttpRequest {
void post(BuildContext context,String url, dynamic data, HttpListener listener) {
Dio dio = new Dio();
dio.post(url, data: data)
.then((Response<dynamic> response) {
if (response.statusCode == 200) {
listener.onSuccess(response.data);
} else {
listener.onError("Error");
}
})
.catchError((Exception error) {
listener.onError(error.toString());
});
}
}
abstract class HttpListener {
void onSuccess(dynamic result);
void onError(String error);
}

Answer 1

It's better to show progressbar in widgets, not in common classes.
Use below example (using http package):
class HttpRequest {
final JsonDecoder _decoder = new JsonDecoder();
Future post(String url, dynamic data) async {
http.Response response = await http.post(url,body: data);
if(response.statusCode < 200 || response.statusCode > 300){
throw new Exception('Faild');
} else {
return _decoder.convert(response.body);
}
}
}
The button that calls post method:
child: MaterialButton(onPressed: () async {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}));
HttpRequest _util = new HttpRequest();
try{
var res = await _util.post('someurl',_data);
} catch(Exception) {
//Handle Exception
} finally {
Navigator.pop(context);
}
});

Answer 2

I made a public package, future_progress_dialog, which is the opposite concept of package.
You wanted to put progress dialog in the task. But I tried the opposite way, putting Future task into the dialog.
https://pub.dev/packages/future_progress_dialog
With this package you can make a progress dialog like this.
var result = await showDialog(
context: context,
child: FutureProgressDialog(future, 'Loading...'));
I hope this would be helpful.

Answer 3

It is better to do it in fully async mode
onPressed: () async {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}));
authenticate().then((value) {
Navigator.pop(context);
Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
}).onError((error, stackTrace) {
Navigator.pop(context);
_showErrorToast(context);
});
},