I am creating flutter application and there is an issue that I have created Bottom Navigation Bar and its not showing on screen
I have fully check it. there is no issue of Images(icons) path and neither any error or issue with yaml file. Everything is ok.
If anyone can tell the issue with experience please guide me.
It was showing a two days ago but now its not showing. I tried many ways but still its not working.
I have uploaded source code on Github. github.com/cogniqube/full_app
import 'package:flutter/material.dart';
// import 'package:flutter_svg/flutter_svg.dart';
import 'package:full_app/pages/Profile%20Page.dart';
import 'package:full_app/pages/home.dart';
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Image.asset('assets/svg/home.png', height: 24, width: 24,), label:'Home'),
BottomNavigationBarItem(icon: Image.asset('assets/svg/heart.png', height: 24, width: 24,), label:'fav'),
BottomNavigationBarItem(icon: Image.asset('assets/svg/add.png', height: 24, width: 24,), label:'add'),
BottomNavigationBarItem(icon: Image.asset('assets/svg/speech-bubble.png', height: 24, width: 24,), label:'message'),
BottomNavigationBarItem(icon: Image.asset('assets/svg/person.png', height: 24, width: 24,), label:'profile'),
],
currentIndex: currentIndex,
onTap: (index) {
setState(() {
currentIndex = index;
});
},
type: BottomNavigationBarType.fixed,
showSelectedLabels: false,
showUnselectedLabels: true,
),
);
}
final pages = [
HomePage(),
Center(child: Text('Favorite'),),
Center(child: Text('Add Post'),),
Center(child: Text('Message'),),
ProfilePage(),
];
}
2
Your “login” button is routing to “/home” building the HomePage widget, which doesn’t have a BottomNavigationBar. If you instead route to “/main” to build the MainPage widget which has the BottomNavigationBar, you’ll see it rendered.
On line 86 on your LoginPage widget, make the following change to the ElevatedButton widget:
ElevatedButton(
onPressed: () {
// ! You are already pushing the named route below so you can delete this first navigation
// Navigator.of(context).push(
// MaterialPageRoute(
// builder: (context) {
// return HomePage();
// },
// ),
// );
// ! This named route has been changed to /main to return the MainPage widget which has the BottomNavigationBar
Navigator.of(context).pushNamed('/main');
}
3
In the logo page just change
Navigator.of(context).pushNamed('/home');
to
this should be the main page to start your app in
and then your route to other pages via Bottom Navigation Bar
Navigator.of(context).pushNamed('/main');