I am working on a Flutter Application in which I am fetching data from the REST APIs.
My case-
The screen consists of a top TabBar which contains a dynamic number of tabs depending on the number of topics fetched from a REST API (These topics will be available before showing the tabs). Below the TabBar, there will be a TabBarView for each of the tabs and associated data should be fetched when a particular Tab is selected (This data should be fetched only when the tab is selected).
Here is a sample image-
Now the part of screen which is is in bluegrey color will be used to show a list of REST API responses. This will be dynamically fetched when the tab is selected.
return Scaffold(
appBar: _appBar,
body: Consumer<CategoryProvider>(
builder: (context, categoryProvider, child) {
if (categoryProvider.subscribedCategories == null ||
categoryProvider.subscribedCategories.isNotEmpty) {
return DefaultTabController(
length: categoryProvider.subscribedCategories.length,
initialIndex: 0,
child: Column(
children: [
Container(
height: height * 0.05,
child: TabBar(
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
tabs: _tabsList(categoryProvider.subscribedCategories),
),
),
Container(
height: height * 0.95,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Container(
color: Colors.blueGrey,
height: height * 0.95,
child: TabBarView(
children: _tabs.map((Tab tab) {
final String label = tab.text!.toLowerCase();
return Center(
child: Container(
height: 100,
width: 100,
child: Text(
'This is the $label tab',
style: TextStyle(
fontSize: 15.sp,
),
),
),
);
}).toList(),
),
),
),
),
],
),
);
} else
return Center(
child: Text(
'You haven\'t subscribed to any topic yet',
style: TextStyle(
fontSize: 15.sp,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
);
},
)
);
Please help me find a way by which I can achieve this same screen. (I have attached code, I am using)
