Question 406417 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Bottom Navigation Bar is not showing

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(),
  ];
}

enter image description here

Tags:

2

Answers


  1. 0

    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');
                  }
    Login or Signup to reply.
  2. 0

    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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search