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

Flutter – How to Fix this Navigation Issue with bottom Navigation Bar

I have created a bottom Navigation Bar using a Container
here the code for it

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:installement1_app/screens/Dashboard.dart';
import 'package:installement1_app/screens/customersScreen.dart';
import 'package:installement1_app/theme/Colors.dart';

class bottomNavBar extends StatefulWidget {
  const bottomNavBar({super.key});

  @override
  State<bottomNavBar> createState() => _bottomNavBarState();
}

class _bottomNavBarState extends State<bottomNavBar> {
  @override
  Widget build(BuildContext context) {
    bool isHomeScreen = false;
    bool isCustomersScreen = false;
    Size size = MediaQuery.of(context).size;
    return Padding(
      padding: EdgeInsets.only(
          left: size.width * 0.04,
          right: size.width * 0.06,
          bottom: size.width * 0.06),
      child: Container(
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(27)),
        height: size.height * 0.07,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: primaryBlue),
              child: IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.add_rounded,
                    color: Colors.white,
                    size: size.width * 0.08,
                  )),
            ),
            IconButton(
              onPressed: () {
                if (!isHomeScreen) {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DashboardScreen()));
                }
              },
              icon: SvgPicture.asset('assets/images/homeIcon.svg'),
            ),
            IconButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => CustomersScreen()));
              },
              icon: SvgPicture.asset('assets/images/usersIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/qrCodeIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/walletIcon.svg'),
            ),
            IconButton(
              onPressed: () {},
              icon: SvgPicture.asset('assets/images/settingsicon.svg'),
            ),
          ],
        ),
      ),
    );
  }
}

Now i Have passed this widget to bottomNavBar

  bottomNavigationBar: const bottomNavBar(),

Now The Navigation is working as intended, i can navigate between different Pages,
But When i am on a Page lets say customerspage:
What should Happen is when i tap the Button that navigates me to the page I am already On the navigator should not navigate as i am already on the page the button leds
But In my case when i am on CustomerPage and i tap on the IconButton That leads to CustomersPage the navigator navigates to the same page again means i can see the navigation animation
in BottomAppBar we can use index and BottomNavBar items to control this but how can it if i have used a container to create a bottom nav bar!

Tags:

2

Answers


  1. 0

    You can create a function that dynamically builds your icons and then pass an onChange function to be executed on icon press.

    You need to create a global variable of selectedIndex which can be used to highlight icons and also be use to check if page is already in view.

    No change in screen will be executed if the selectedIndex equals to the icon pressed index.

    Reference below code for solution to you problem.

    NOTE: This is a more efficient and cleaner method while creating custom bottom nav bars. You can also use LayoutBuilder but I have used this approach for simplicity.

    import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key});

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  // ADDED THIS
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    bool isHomeScreen = false;
    bool isCustomersScreen = false;

    Size size = MediaQuery
        .of(context)
        .size;
    return Padding(
      padding: EdgeInsets.only(
          left: size.width * 0.04,
          right: size.width * 0.06,
          bottom: size.width * 0.06),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(27),),
        height: size.height * 0.07,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          // ADDED THIS
          children: buildIcons(),
        ),
      ),
    );
  }

  List<Widget> buildIcons() {
    final list = <Widget>[];

    final icons = <String>[
      // ADD YOU ICON ASSETS HERE
    ];

    for (var index = 0; index <= icons.length; index++) {
      list.add(IconButton(
        onPressed: () => onChange(index),
        icon: SvgPicture.asset(icons[index]),
      ),);
    }

    return list;
  }

  void onChange(int change) {
    if (selectedIndex != change) {
      selectedIndex = change;
      switch (change) {
      // ADD YOUR ROUTING FUNCTIONALITY HERE
      // EXAMPLE
        case 0:
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DashboardScreen()));
          break;
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search