1. Wrap the entire page in a **StatefulWidget** to manage the index of
the **BottomNavigationBar**
2. Use the **DefaultTabController** for TabBar and TabBarView.
3. Use a conditional layout in the **body** of the **Scaffold** to
switch between the **TabBarView** and other **BottomNavigationBar**
pages based on the current selected index of the
**BottomNavigationBar**.
plz verify this code
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _bottomNavIndex = 0;
final List<Widget> _bottomNavPages = [
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('Posts'),
bottom: const TabBar(
dividerColor: Colors.transparent,
labelColor: Colors.blue,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.orange,
tabs: [
Tab(text: "New"),
Tab(text: "Recommended"),
Tab(text: "For You"),
],
),
),
body: const TabBarView(
children: [
Center(child: Text("New Posts")),
Center(child: Text("Recommended Posts")),
Center(child: Text("For You Posts")),
],
),
),
),
// Other Pages
const Center(child: Text("Home Page")),
const Center(child: Text("Profile Page")),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _bottomNavPages[_bottomNavIndex], // Show page based on the bottom nav index
bottomNavigationBar: BottomNavigationBar(
currentIndex: _bottomNavIndex,
onTap: (index) {
setState(() {
_bottomNavIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.list),
label: 'Posts',
activeIcon: Icon(
Icons.list,
color: Colors.red,
)),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
activeIcon: Icon(
Icons.home,
color: Colors.red,
)),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
activeIcon: Icon(
Icons.person,
color: Colors.red,
)),
],
),
);
}
}
I HOPE THIS IS HELP YOU. THANK YOU :)
this is an example, you can manipulate how the colors and how the labels are shown,
first make sure to extend TickerProviderStateMixin for example:
class _LandingState extends State<Landing> with TickerProviderStateMixin {
then create a TabController
TabController? con;
in the initState method type:
@override
void initState() {
con = TabController(vsync: this, length: 4);
super.initState();
}
the length is how many widget you have in Linked in there 5 so the length is set to 5
in the Scaffold widget add the following
bottomNavigationBar: Container(
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
25,
),
topRight: Radius.circular(
25,
),
),
),
child: TabBar(
controller: con,
indicatorColor: Colors.red,
overlayColor: MaterialStateProperty.all(Colors.white,),
labelStyle: const TextStyle(
fontSize: 0,
),
labelColor: Colors.white,
unselectedLabelStyle: const TextStyle(
fontSize: 11,
),
tabs: const [
Tab(
icon: Icon(
Icons.home_outlined,
),
text: 'Home',
),
Tab(
icon: Icon(
Icons.notifications,
),
text: 'Notification',
),
Tab(
icon: Icon(
Icons.app_registration,
),
text: 'Information',
),
Tab(
icon: Icon(
Icons.settings,
),
text: 'Settings',
),
],
),
),
then in the Scaffold body:
TabBarView(
controller: con,
children: <widget>[
Container(
child: Text(con!.index.toString()),
),
Container(
child: Text(con!.index.toString()),
),
Container(
child: Text(con!.index.toString()),
),
Container(
child: Text(con!.index.toString()),
),
Container(
child: Text(con!.index.toString()),
),
],
),
make sure there are only and exactly 5 widget in the children of the TabBarView,
the same exact length you already set in the TabController.
