Flutter build TabBarView items via server response - flutter

Question

in one of our mobile application we have a simple screen which we want to make TabBarView pages via result of server response, for example if server response this collection:
{
"categories": [
{
/* has 3 children */
"category_item": {
"id": 1,
"title": "sample"
},
"products": [
{
"id": 1,
"title": "sample 1"
},
{
"id": 2,
"title": "sample 1"
},
{
"id": 3,
"title": "sample 1"
}
]
},
/* has 2 children */
{
"category_item": {
"id": 2,
"title": "test"
},
"products": [
{
"id": 1,
"title": "test 1"
},
{
"id": 2,
"title": "test 1"
}
]
}
]
}
we should have 2 Tabs as sample and test with some children inside TabBarView relatives with parent category, for example first index of array has 3 children and second index of array has 2 children.
our problem is TabController that when we retrieve data from server, screen has been built and we can't manage this action. I mean this tab and TabBarView children should be built with response data. basically time I passed zero to TabController because server doesn't response in this time and after getting data I get error on length of that,
class SelectClothesScreenState extends State<SelectClothesScreen> with SingleTickerProviderStateMixin {
TabController _tabController;
CategoryProducts _cats;
List<Products> _productList = [];
#override
void initState() {
super.initState();
_getCats();
}
bool _isLoading = true;
_getCats() async {
final CategoryProducts response = await Api.apiCatList();
List<Products> _p = [];
setState(() {
_cats = response;
_productList = _p;
_isLoading = false;
});
_tabController = TabController(length: _cats == null ? 0 : _cats.categories.length ?? 0, vsync: this);
}
Widget loadingView() {
return CircularProgressIndicator();
}
#override
Widget build(BuildContext context) {
var fullWidth = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
body: Column(
children: [
//address and search icon and close icon
Container(
height: 50,
child: _cats != null && _isLoading
? loadingView()
: ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: _cats == null ? 0 : _cats.categories.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
print(_cats.categories.length);
return GestureDetector(
onTap: () {
print(index);
_tabController.animateTo(index, duration: Duration(milliseconds: 750), curve: Curves.ease);
},
child: CatItem(catView: _cats.categories[index].categoryItem),
);
},
),
),
//content grid list product and btn confirm
Container(
width: fullWidth,
child: TabBarView(controller: _tabController, children: [
//grid product list
...List.generate(_cats == null ? 0 : _cats.categories.length, (index) {
return Container(
width: fullWidth,
child: GridView.builder(
shrinkWrap: true,
itemCount: _productList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return Container(color: Colors.black);
//return ProductView(productView: _productList[index]);
},
),
);
}),
]),
),
],
));
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
}
how can I set correct implementation for length of TabController after retrieving data from server? thanks in advance