Flutter - Bottom Navigation Bar does not work

Question

I am trying to use the BottomNavigationBar in Flutter. It's working good. There is no error. But when I press the button on bottom navigation bar, there is no response. And also notice there is no comment about the bottom navigation bar in the console.

import 'package:copy_ems/screen/more_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../my_profile.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  Widget child = Container();
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    switch(_currentIndex) {
      case 0:
        child = const MoreScreen();
        break;

      case 1:
        child = const MoreScreen();
        break;

      case 2:
        child = const MyProfile();
        break;

      case 3:
        child = const MoreScreen();
        break;
    }

    return BottomNavigationBar(
      currentIndex: _currentIndex,
      backgroundColor: Colors.white,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.black87.withOpacity(.60),
      selectedFontSize: 14,
      unselectedFontSize: 14,
      onTap: (value) {
        setState(() => _currentIndex = value,
        );
      },
      items:  const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.archive_rounded),
          label: 'My Feed',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_travel),
          label: 'Leave',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add_task),
          label: 'Tasks',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.more_horiz),
          label: 'More',
        ),
      ],
    );
  }
}

What's the problem with this code. Can any one help me?

from where you are calling bottomnavigarion bar? what is the error you are getting? — Alan Bosco, Dec 15 '21 at 05:58
https://github.com/flutter/flutter/issues/16221#issuecomment-389407234 — Anmol Mishra, Dec 15 '21 at 06:02
Using Scaffold class Properties I call this, like bottomNavigationBar: const BottomNavBar(), — M.Jehan, Dec 15 '21 at 06:12

score 0 · Answer 1 · answered Dec 15 '21 at 05:50

0

are you navigating to BottomNavBar?

Try this Navigator.push(context,MaterialPageRoute(builder: (context)=> BottomNavBar()));

answered Dec 15 '21 at 05:50

Shailendra Rajput

2,131
17
26

score 0 · Answer 2 · answered Dec 15 '21 at 06:09

check this code my help you

import 'package:copy_ems/screen/more_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../my_profile.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _currentIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
      MoreScreen(),
      MoreScreen(),
      MyProfile(),
      MoreScreen(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_currentIndex);
      bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
      backgroundColor: Colors.white,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.black87.withOpacity(.60),
      selectedFontSize: 14,
      unselectedFontSize: 14,
      onTap: (value) {
        setState(() => _currentIndex = value);
      },
      items:  const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.archive_rounded),
          label: 'My Feed',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_travel),
          label: 'Leave',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add_task),
          label: 'Tasks',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.more_horiz),
          label: 'More',
        ),
      ],
    ); 
  }
}

can you please provide the code of MoreScreen() widget @M.Jehan — Jaydeep chatrola, Dec 15 '21 at 06:32
I have tried this. But a black screen was shown in the emulator and an error is shown in the console- The offending Expanded is currently placed inside a Padding widget. — M.Jehan, Dec 15 '21 at 06:33

score 0 · Answer 3 · answered Dec 15 '21 at 06:31

you can use this way:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Nev';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: My Feed',
      style: optionStyle,
    ),
    Text(
      'Index 1: Leave',
      style: optionStyle,
    ),
    Text(
      'Index 2: Tasks',
      style: optionStyle,
    ),
     Text(
      'Index 2: More',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'My Feed',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Leave',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Tasks',
          ),
       BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'More',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Flutter - Bottom Navigation Bar does not work

3 Answers3