How to switch class when a tab is clicked using google_nav_bar Flutter - flutter

Question

I'm using google_nav_bar and line_icons from pub.
I have 3 classes named Home(), Likes(), Profile(). I want to switch classes when a bottom navigation bar tab is clicked, I have made a list of the classes, but I'm not sure how to change the classes when a tab is clicked.
Here is the code I have so far:
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _page = 0;
final screens = [
Home(),
Likes(),
Profile()
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
bottomNavigationBar: GNav(
rippleColor: Colors.grey[300],
hoverColor: Colors.grey[100],
gap: 8,
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
duration: Duration(milliseconds: 400),
tabBackgroundColor: Colors.grey[100],
color: Colors.black,
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _page,
onTabChange: (index) {
setState(() {
_page = index;
});
},
),
body: /*new Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: _page == 0
? Home()
: _page == 1
? Likes()
: Profile(),
),*/
Center(
child: screens.elementAt(_page),
),
);
}
}
I would like to navigate the bottom navigation bar to the Likes() class when the second tab is clicked and navigate to the Profile() class when the third navigation bar is clicked..

Answer 1

Everything is working fine. Replace Tab widget with different widgets like Home(), Likes(), Profile()..
Now it will be like
class Tab extends StatelessWidget {
final int tab;
const Tab({
Key? key,
required this.tab,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Text("$tab"),
);
}
}
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _page = 0;
final screens = const [Tab(tab: 1), Tab(tab: 2), Tab(tab: 3)];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
bottomNavigationBar: GNav(
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
gap: 8,
activeColor: Colors.black,
iconSize: 24,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
duration: const Duration(milliseconds: 400),
tabBackgroundColor: Colors.grey[100]!,
color: Colors.black,
tabs: const [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _page,
onTabChange: (index) {
setState(() {
_page = index;
});
},
),
body: Center(
child: screens[_page],
),
);
}
}
Does it solve in your case?

Answer 2

Try below code hope its helpful to you. Just add your Widgets in your classes
Your BottomBar Widget.
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Home(),
Likes(),
Profile(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 20,
title: const Text('GoogleNavBar'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
blurRadius: 20,
color: Colors.black.withOpacity(.1),
)
],
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
child: GNav(
rippleColor: Colors.grey[300]!,
hoverColor: Colors.grey[100]!,
gap: 8,
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
duration: Duration(milliseconds: 400),
tabBackgroundColor: Colors.grey[100]!,
color: Colors.black,
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _selectedIndex,
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
},
),
),
),
),
);
}
}
Your Home Class
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
'Home',
);
}
}
Your Likes Class
class Likes extends StatelessWidget {
const Likes({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
'Likes',
);
}
}
Your Profile Class
class Profile extends StatelessWidget {
const Profile({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
'Profile',
);
}
}

Answer 3

For a better switch use IndexedStack:
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _page = 0;
final screens = [
Home(),
Likes(),
Profile()
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
bottomNavigationBar: GNav(
rippleColor: Colors.grey[300],
hoverColor: Colors.grey[100],
gap: 8,
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
duration: Duration(milliseconds: 400),
tabBackgroundColor: Colors.grey[100],
color: Colors.black,
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart,
text: 'Likes',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
),
],
selectedIndex: _page,
onTabChange: (index) {
setState(() {
_page = index;
});
},
),
body: IndexedStack(
index: _page,
children: screens,
),
);
}
}