I have a problem with my BottomNavigationBar in Flutter. Please help me with this issue. i really need it to done. I don't want to keep my page alive if I press jump to any page from screens, not from my BottomNavigationBar. eg, if I have three screens that navigate from the bottom bar its works fine but if I add a button in any of the three pages that navigate to another screen that does not belong to the bottom bar then it keeps that screen alive the previous screen.
here my implementation.
BottomNavigation :
footer.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';
void main() {
runApp(MaterialApp(
home: Footer(),
));
}
class Footer extends StatefulWidget {
@override
_Footer createState() => _Footer();
}
class _Footer extends State<Footer> {
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,
),
// This avoid the other pages to be built unnecessarily
//Notifications(),
// SizedBox(),
];
}
late DateTime currentBackPressTime;
@override
Widget build(BuildContext context) {
return Scaffold(
body: DoubleBackToCloseApp(
snackBar: SnackBar(
content: const Text(
'Tap back again to leave',
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
),
duration: Duration(seconds: 4),
backgroundColor: Colors.blue,
width: 340.0,
padding: EdgeInsets.all(15),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: _pages[_selectedPage],
),
bottomNavigationBar: BottomNavigationBar(
items: _items,
currentIndex: _selectedPage,
onTap: (index) {
setState(() {
// now check if the chosen page has already been built
// if it hasn't, then it still is a SizedBox
_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>{
@override
Widget build(BuildContext context) {
// You'll see that it will only print once
return Navigator(
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.text),
actions: <Widget>[
Row(
children: [
InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (ctx) => Notifications()));
},
child: Icon(Icons.notifications),
)
],
)
],
),
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'),
),
),
);
},
),
),
),
],
),
);
}
}
Here are my three files that navigate the inner screen
the flow of navigation is first load Footer.dart file that is the main file inside there is three pages in BottomNavigationBar() in the first screen on tap home icon it loads MyPage.dart file which contains a text and button. on the button press, it navigates MyCustomPage.dart file. now the issue is when I click on the home icon from BottomNavigationBar() it loads MyPage screen and on press button inside that screen it loads MyCustomPage but when MyCustomPage.dart file load it keeps home icon alive and I don't have access to press the home icon again.
I hope you understand what I am trying to say. If anyone knows please help me.
