I have a button that should redirect me to the second tab on my tab bar upon clicking it.
The thing is that the navigation in my app is a little bit complicated , i have a main menu which is my Navigation bar , and i navigate between the screens in my app , mainly through it , each screen posses an index , for instance , index (0) the first screen, is composed of a tab bar that is itself divided in two tabs. I need to be able to click on a button in screen index (2) and then be redirected to screen index (0) tab 2. The app's current behavior is to redirect me to tab 1, which is quite normal , since i've instructed my app to redirect me to my main nav bar page and gave it the index (0) , so it's going to logically take me to the first tab .
here's the function that i am calling in the onclick action :
void redirectLinkNotif(BuildContext context) {
if (localNotification!.topic == "QRQC_CREATION") {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) {
return BottomNavBar(
index: 0,
);
},
),
);
} else {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) {
return BottomNavBar(
index: 4,
);
},
),
);
}
}
Here's my tab bar page :
class MainQrqcScreenWithTab extends StatefulWidget {
const MainQrqcScreenWithTab({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => MainQrqcScreenWithTabState();
}
class MainQrqcScreenWithTabState extends State<MainQrqcScreenWithTab> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/deepnBg.png"),
fit: BoxFit.cover,
)),
child: Column(
children: <Widget>[
Row(
children: [
Expanded(
child: TabBar(
labelStyle: TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold),
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: <Widget>[
Tab(
text: 'Mes QRQC',
),
Tab(
text: 'Liste des QRQC',
)
],
),
),
],
),
Expanded(
child: TabBarView(children: [MyQrqc(), AllQrqcListView()]),
),
],
),
),
),
),
);
}
}
And this is my bottom nav bar (main page) :
class BottomNavBar extends StatefulWidget {
@override
State<BottomNavBar> createState() => _BottomNavBarState();
int index;
BottomNavBar({required this.index});
}
class _BottomNavBarState extends State<BottomNavBar> {
bool isClick = false;
int changeActivePage(int index) {
setState(() {
//activeIndex = index;
widget.index = index;
});
return index;
}
List<Widget> pages = [];
final tabs = [
"Mes Qrqc",
"Profil",
"Ajout Qrqc",
"Notifications",
"Liste des actions",
"Liste des actions",
];
@override
void initState() {
pages = const [
MainQrqcScreenWithTab(),
UserProfile(),
AddQrqcScreen(),
ListNotifications(),
ToDoScreen(),
];
super.initState();
}
@override
Widget build(BuildContext context) {
SizeConfig.init(context);
const kPrimaryColor = Color(0xFF1C5E7D);
const kPrimaryLightColor = Color(0xFF1393CE);
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize: Size.fromHeight(SizeConfig.screenHeight * 0.075),
child: CustomBaseAppBar(
title: tabs[widget.index],
callback: () {
setState(() {
changeActivePage(3);
});
Future.delayed(Duration(seconds: 1)).then(
(value) => LocalNotificationsViewModel().readNotifications());
},
),
),
bottomNavigationBar: widget.index == 2
? Visibility(
visible: false,
child: BottomAppBar(
clipBehavior:
Clip.antiAlias, //bottom navigation bar on scaffold
color: Colors.transparent,
shape: CircularNotchedRectangle(), //shape of notch
notchMargin: 6.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [kPrimaryColor, kPrimaryLightColor],
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0.1, 0.8],
tileMode: TileMode.clamp,
),
),
),
),
),
)
: BottomAppBar(
clipBehavior:
Clip.antiAlias, //bottom navigation bar on scaffold
color: Colors.transparent,
shape: CircularNotchedRectangle(), //shape of notch
notchMargin: 6.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [kPrimaryColor, kPrimaryLightColor],
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0.1, 0.8],
tileMode: TileMode.clamp,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
onPressed: () => changeActivePage(0),
color: Colors.white,
icon: Icon(Icons.home)),
Padding(
padding: const EdgeInsets.only(right: 38.0),
child: IconButton(
onPressed: () => changeActivePage(4),
color: Colors.white,
icon: Icon(Icons.view_list_outlined)),
),
Padding(
padding: const EdgeInsets.only(left: 38.0),
child: IconButton(
onPressed: () => changeActivePage(3),
color: Colors.white,
icon: Icon(Icons.notifications)),
),
IconButton(
onPressed: () => changeActivePage(1),
color: Colors.white,
icon: Icon(Icons.person)),
],
),
),
),
),
body: pages[widget.index],
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: widget.index == 2
? Visibility(
visible: false,
child: FloatingActionButton(
backgroundColor: kPrimaryLightColor,
onPressed: () async {
setState(() {});
},
child: const Text("OK"),
),
)
: FloatingActionButton(
backgroundColor: kPrimaryLightColor,
onPressed: () {
changeActivePage(2);
},
child: const Icon(Icons.add),
),
),
);
}
}
i want to be able to be redirected to index 0 , in my nav bar , tab 2 , and i have no clue how to do so if you'd be willing to help i'd be grateful , happy coding .