How can I shift from Tab 1 to Tab 2 by clicking on the Go to Tab 2 button on Screen 1?
The image description of what I want to achieve! Image
The code for the Persistent Bottom Navigation Bar is given below:
import 'package:bottom_nav_bar/screens/screen1.dart';
import 'package:bottom_nav_bar/screens/screen2.dart';
import 'package:bottom_nav_bar/screens/screen3.dart';
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
class BottomNavigationBarPanel extends StatefulWidget {
BottomNavigationBarPanel({Key? key, required this.selectedBottomNavIndex})
: super(key: key);
int selectedBottomNavIndex;
@override
State<BottomNavigationBarPanel> createState() =>
_BottomNavigationBarPanelState();
}
class _BottomNavigationBarPanelState extends State<BottomNavigationBarPanel> {
final int _selectedBottomNavIndex = 0;
PersistentTabController persistentTabController = PersistentTabController();
final List<Widget> screens = [
const Screen1(),
const Screen2(),
const Screen3(),
];
final List<PersistentBottomNavBarItem> _persistentBottomNavberItems = [
PersistentBottomNavBarItem(
inactiveIcon: inActive('Tab 1'),
icon: active('Tab 1'),
),
PersistentBottomNavBarItem(
inactiveIcon: inActive('Tab 2'),
icon: active('Tab 2'),
),
PersistentBottomNavBarItem(
inactiveIcon: inActive('Tab 3'),
icon: active('TAb 3'),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: PersistentTabView(
context,
controller: persistentTabController,
screens: screens,
items: _persistentBottomNavberItems,
confineInSafeArea: true,
popAllScreensOnTapAnyTabs: true,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: false,
backgroundColor: Colors.black,
navBarStyle: NavBarStyle.simple,
popAllScreensOnTapOfSelectedTab: true,
popActionScreens: PopActionScreensType.all,
navBarHeight: 60,
margin: EdgeInsets.zero,
screenTransitionAnimation: const ScreenTransitionAnimation(
animateTabTransition: true,
curve: Curves.linear,
duration: Duration(milliseconds: 500),
),
decoration: const NavBarDecoration(
boxShadow: [
BoxShadow(
color: Color.fromRGBO(48, 54, 91, 0.2),
blurRadius: 2,
offset: Offset(0, -2),
),
],
),
padding:
const NavBarPadding.only(bottom: 0, top: 0, left: 10, right: 10),
),
);
}
}
Widget active(String label) {
return Padding(
padding: const EdgeInsets.only(top: 11, bottom: 11),
child: Container(
decoration: BoxDecoration(
color: Colors.green[400],
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding:
const EdgeInsets.only(top: 10, bottom: 10, right: 20, left: 22),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.black),
)
],
),
)),
);
}
Widget inActive(String label) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
label,
style: const TextStyle(
fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white),
)
],
),
);
}
I used Persistent Bottom navigation bar and I wanted a way to switch tabs explicitly without clicking on the bottom tab bar!