I'm trying to implement clickable the selected item in the Bottom navigation bar in my Flutter app. What I'm trying to achieve is when the user clicks any item in the Bottom navigation bar the selected item page contains the button which navigates to another inner page so if I want to try to click the select item in the Bottom navigation bar it shows me the same inner page, the app changes the selected tab inside the bottom navigation bar. but if I click again the select item tab it shows me the same inner page. Any help is appreciated.
Or Maybe it's clickable but the selected tab shows me the inner page only
Any help is appreciated.
My main.dart:-
import 'package:flutter/material.dart';
import 'MyPage.dart';
import 'MyPage2.dart';
import 'MyPage3.dart';
import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'Notifications.dart';
import 'MyCustomPage.dart';
class MyApp extends StatefulWidget {
@override
_MyAppcreateState() => _MyApp();
}
class _MyApp extends State<MyApp> {
late List<Widget> _pages;
List<BottomNavigationBarItem> _items = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.messenger_rounded),
label: "Messages",
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: "Settings",
)
];
late int _selectedPage;
@override
void initState() {
super.initState();
_selectedPage = 0;
_pages = [
MyPage(
count: 1,
),
MyPage2(
count: 2,
),
MyPage3(
count: 3,
),
];
}
@override
Widget build(BuildContext context) {
print(_selectedPage);
return Scaffold(
body: _pages[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
items: _items,
currentIndex: _selectedPage,
onTap: (index) {
setState(() {
_selectedPage = index;
});
},
)
);
}
}
MyPage.dart
import 'package:flutter/material.dart';
import 'MyCustomPage.dart';
import 'Notifications.dart';
class MyPage extends StatefulWidget {
final count;
MyPage({Key? key, this.count}) : super(key: key);
@override
_MyPage createState() => _MyPage();
}
class _MyPage extends State<MyPage>{
late int _selectedPage;
@override
Widget build(BuildContext context) {
return Navigator(
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('page 01'),
),
body: Center(
child: RaisedButton(
child: Text('my page1'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (ctx) => MyCustomPage()
)
);
},
),
),
);
},
);
},
);
}
}
MyCustomPage.dart
import 'package:flutter/material.dart';
class MyCustomPage extends StatefulWidget {
MyCustomPage({Key? key}) : super(key: key);
@override
_MyCustomPage createState() => _MyCustomPage();
}
class _MyCustomPage extends State<MyCustomPage>{
@override
Widget build(BuildContext parentContext) {
return Scaffold(
appBar: AppBar(
title: Text('custompage'),
),
body: Column(
children: [
Expanded(
child: Container(
child: ListView.builder(
itemCount: 15,
itemBuilder: (context, index) {
return Container(
width: double.infinity,
child: Card(
child: Center(
child: Text('My Custom Page'),
),
),
);
},
),
),
),
],
),
);
}
}
I add the image for a better understanding:-
my home page view
MycustomPage/inner page view
this is my issue what I want is when I navigate to the inner page the select tab must be unselectable and when I click on that selected tab it will show the first page which is MyPage.dart page, not the inner page(MyCustomPage.dart).
Please answer me if any further questions. Please comment to me if you don't understand it.
But please don't ignore this. I really want to do that task.
Any help is appreciated.

