Use progress/activity indicator waiting for await to finish - flutter

Question

I have an async function. I'm using it correctly. Here's what it looks like:
Future<void> getData() async
{
// get data from DB
}
It works. I call it from the
void initState ()
{
super.initState();
getData();
}
I would like to make sure that there is a progress indicator running until the function has completed whatever it was doing.
Can someone help me with that? I have no idea where to begin.
Parts of this function get completed at whatever time/speed it takes it each command to finish, but I need to wait for the entire getData() function to finish completely before my app starts. How can I do that?

Answer 1

While ejabu's solution works, it is far from perfect and calling asynchronous functions without await, especially in initState is a big nono.
Just like everything in Flutter, if you have a problem, there's a widget for that.
The ideal widget for rendering a page after a Future completed is FutureBuilder (docs).
FutureBuilder is a dead useful widget. You can use it for any widget that has to have a Future complete before it is built.
For example, if an app requires the user to sign in to Google, initialize a few APIs, then show the homepage, then you can use a FutureBuilder to show a progress indicator when the Future is running, an error page when an error occurs, or the homepage if all goes well and the Future completes without errors.
Here's a quick example from the build method of a widget:
Widget build() {
return FutureBuilder(
future: futureFunction(),
builder: (context, snapshot) {
// Future done with no errors
if (snapshot.connectionState == ConnectionState.done &&
!snapshot.hasError) {
return HomePage();
}
// Future with some errors
else if (snapshot.connectionState == ConnectionState.done &&
snapshot.hasError) {
return Text("The error ${snapshot.error} occured");
// Future not done yet
else {
return Scaffold(
body: Center(
child: Container(
width: MediaQuery.of(context).size.width / 1.5,
height: MediaQuery.of(context).size.width / 1.5,
child: CircularProgressIndicator(strokeWidth: 10),
),
),
);
}
}
)
}
Can I quickly rant about how terrible the editor in Stack Overflow is. It caused me to accidently post my answer before I was done :(

Answer 2

Have a stateful widget before Home Screen
pushReplace Screen after fetch database completed
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: LoadingScreen(),
routes: {
'/homePage': (context){
return HomePage();
},
},
);
}
}
class LoadingScreen extends StatefulWidget {
#override
_LoadingScreenState createState() => _LoadingScreenState();
}
class _LoadingScreenState extends State<LoadingScreen> {
Future<void> getData() async {
// get data from DB
}
void navigationPage() async {
await getData();
Navigator.of(context).pushReplacementNamed('/homePage');
}
#override
void initState() {
super.initState();
navigationPage();
}
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
}