getting data after building widgets - flutter

Question

I am trying to get data from Database, but my widget is built before I can get them...
class CategoriesWidget extends StatefulWidget {
#override
_CategoriesWidgetState createState() => _CategoriesWidgetState();
}
class _CategoriesWidgetState extends State<CategoriesWidget> {
SharedPreferences prefs;
String token;
var _isInit = false;
#override
void initState() {
if (!_isInit) {
super.initState();
fetchCat();
_isInit = true;
}
}
var categories = {};
fetchCat() async {
final prefs = await SharedPreferences.getInstance();
setState(() {
token = prefs.getString('api_token');
});
await fetchCategories(token).then((result) {
categories = result[1];
print(categories);
print(result[1]);
});
}
#override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
print('2');
return Column(
// code here
);
}
}
you can see that I print 1 and 2 to see which one is getting the first and I got as result 2 then 1.

Answer 1

You should use a FutureBuilder.
#override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _fetchCat(),
builder: (context, snapshot) => snapshot.hasData
? MyWidget(data: snapshot.data)
: Text('Loading...'),
);
}
And with a FutureBuilder, your Widget could probably stay Stateless.
Here is a Minimal Working Example:
Full source code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'StackOverflow Answer',
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: CategoriesWidget()),
);
}
}
class CategoriesWidget extends StatefulWidget {
#override
_CategoriesWidgetState createState() => _CategoriesWidgetState();
}
class _CategoriesWidgetState extends State<CategoriesWidget> {
Future<String> _fetchCat() async {
await Future.delayed(Duration(seconds: 2));
return 'Category';
}
#override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _fetchCat(),
builder: (context, snapshot) => Text(
snapshot.hasData ? snapshot.data ?? 'NO CATEGORY' : 'Loading...'),
);
}
}