Flutter Error: Use api in tabbar and tabbarView? - flutter

Question

I want to fetch data from API and use the data in tabbar and tabview.
I want to create (Ayurved app), I have a list of subcategory in the api, I followed this documentation, so I need to add api's subcategory to my TabBar.
So How can I do that? I don't understand how this will happen.
This is my Tab Page.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:hospital/customApiVariable.dart';
import 'package:http/http.dart' as http;
class TabPage extends StatefulWidget {
final medicineCatUniqId;
const TabPage({Key key, this.medicineCatUniqId}) : super(key: key);
// const TabPage({Key key}) : super(key: key);
#override
_TabPageState createState() => _TabPageState();
}
class _TabPageState extends State<TabPage> {
var response;
var medicineSubCategoryApi;
#override
void initState() {
// TODO: implement initState
//
super.initState();
// for loading
fetchData(widget.medicineCatUniqId);
}
fetchData(var medicineCatUniqId) async {
a2rTokenKey=carpet1234');
var api = Uri.parse(
'$baseUrl/productSubCatApi.php?a2rTokenKey=$a2rTokenKey&pcat=$medicineCatUniqId');
response = await http.get(
api,
);
print("medicineCatApiLnk " + api.toString());
print("medicineCat" + response.body);
medicineSubCategoryApi = jsonDecode(response.body);
print("medicineCatString" + medicineSubCategoryApi.toString());
setState(() {});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: medicineSubCategoryApi.length,
child: Scaffold(
appBar: AppBar(
title: const Text('Tabbed AppBar'),
bottom: TabBar(
isScrollable: true,
tabs: medicineSubCategoryApi.map((choice) {
return Tab(
text: choice.psubCatName,
icon: Icon(choice),
);
}).toList(),
),
),
body: TabBarView(
children: medicineSubCategoryApi.map<Widget>((choice) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: ChoicePage(
choice: choice,
),
);
}).toList(),
),
),
),
);
}
}
class ChoicePage extends StatelessWidget {
const ChoicePage({Key key, this.choice}) : super(key: key);
final choice;
#override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// Icon(
// choice,
// size: 150.0,
// color: textStyle.color,
// ),
Text(
choice.psubCatName,
style: textStyle,
),
],
),
),
);
}
}
This is my Api Data.
[{"psubCatUniq":"60c464556cd04","psubCatName":"TURMERIC CAPSULES","psubCatDescrition":"TURMERIC CAPSULES","psubCatImg":"http:\/\/a2rstore.com\/inventory\/images\/subCategory-bb.jpg","psubCatIcon":"","psubCatDate":"","psubCatlink":"list.php?subName=TURMERIC CAPSULES&sub=60c464556cd04","pcatUniq":"60c462501a664","pcatName":"Herbal Tablets"},{"psubCatUniq":"60c464360de3f","psubCatName":"PAIN CALM TABLET","psubCatDescrition":"PAIN CALM TABLET","psubCatImg":"http:\/\/a2rstore.com\/inventory\/images\/subCategory-aa.jpg","psubCatIcon":"","psubCatDate":"","psubCatlink":"list.php?subName=PAIN CALM TABLET&sub=60c464360de3f","pcatUniq":"60c462501a664","pcatName":"Herbal Tablets"}]

Answer 1

You can use a FutureBuilder widget to make the API call then access the data you require from the response data to create the Tabs.
A Simple Example
#override
Widget build(BuildContext context) {
return MaterialApp(
home: FutureBuilder(
future: fetchData(widget.medicineCatUniqId),
builder: (context, snapshot) {
if (snapshot.hasData) {
// API data will be stored as snapshot.data
return DefaultTabController(
// Your Widget UI here ( Copy & paste ) what you have above
);
} else if (snapshot.hasError) {
return Text('Error');
} else {
return Text('Loading');
}
}
),
);
}
You will also need to update fetchData() to return the value to FutureBuilder:
fetchData(var medicineCatUniqId) async {
var api = Uri.parse(
'$baseUrl/productSubCatApi.php?a2rTokenKey=$a2rTokenKey&pcat=$medicineCatUniqId');
response = await http.get(
api,
);
print("medicineCatApiLnk " + api.toString());
print("medicineCat" + response.body);
medicineSubCategoryApi = jsonDecode(response.body);
print("medicineCatString" + medicineSubCategoryApi.toString());
//setState(() {});
return medicineSubCategoryApi;
}