How to change pages/screen with custom tab bar - flutter

Question

I want to change screens with custom tab bar,i want when i click Allshoes(the page of all shoes should display) then jordan and the rest, i have tried so many ways but it is not working for me. please assit me.
The image
I want to change screens with custom tab bar,i want when i click Allshoes(the page of all shoes should display) then jordan and the rest, i have tried so many ways but it is not working for me. please assit me.
`class MyTabBar extends StatefulWidget {
const MyTabBar({Key? key}) : super(key: key);
#override
State<MyTabBar> createState() => _MyTabBarState();
}
class _MyTabBarState extends State<MyTabBar>
with SingleTickerProviderStateMixin{
int _isSelectedIndex = 0;
late TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 6);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
List<Widget> pageList = [
const AllShoesPage(),
const JordanPage(),
const BasketBallPage(),
const TennisPage(),
const WalkingPage(),
const SoccerPage()
];
#override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 60.0,
width: double.infinity,
child: TabBar(
controller: _tabController,
tabs: [ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: tabBarItems.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, index) {
return Column(
children: [
GestureDetector(
onTap: () => setState(() =>_isSelectedIndex = index),
child: Container(
margin: const EdgeInsets.all(5.0),
height: 45,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
color: _isSelectedIndex == index
? Appcolors.primaryColor
: Appcolors.whiteColor,
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(
tabBarItems[index],
style: GoogleFonts.poppins(
color: _isSelectedIndex == index
? Appcolors.whiteColor
: Appcolors.darkGreyColor),
),
),
)
),
Visibility(
visible: _isSelectedIndex == index,
child: Container(
width: 5,
height: 5,
decoration: const BoxDecoration(
color: Appcolors.primaryColor,
shape: BoxShape.circle),
),
)
],
);
},
)]
),
),
TabBarView(
controller: _tabController,
children: pageList)
],
);
}
}
`

Answer 1

Here, tabs require list of Widgets but you provide only one Widget which is listView.builder, instead try this
tabs: List.generate(tabBarItems.length, (index) => MyWidget())
Since you are already using TabBar so you don't need to use GestureDetector(), also if you don't want horizontal scrolling effect make isScrollable: flase,
also wrap TabBarView with Expanded Widget like this
Expanded(child: TabBarView())