How to make a callable BottomNavigationBar that shows in home after user login-CodePudding

i have created a verification user and navigate it to home screen. then i want to show BottomNavigationBar inside the app after login. so i created BottomNavigationBar within a callable widget so i can call it inside every pages. i don't want to use curvednavigation bar and try to use Bottom navigationbar without routes, should i use routes? im new to flutter and don't know whats better and not to do.

This is my code thats works with main.dart but won't works if i change it into another widget. i get the Items is not defined and did'nt know why.

// import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
// import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_core/firebase_core.dart';

import '../page/group_screen.dart';
import '../page/home_screen.dart';
import '../page/post_screen.dart';
import '../page/profile_screen.dart';
import '../page/search_screen.dart';

class BottomNavigationBar extends StatefulWidget {
  @override
  State<BottomNavigationBar> createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<BottomNavigationBar> {
  int currentIndex = 0;
  final screens = [
    HomePage(),
    SearchPage(),
    Post(),
    Group(),
    Profile(),
  ];
  @override
  Widget build(BuildContext context) => Scaffold(
        body: IndexedStack(index: currentIndex, children: screens),
        bottomNavigationBar: BottomNavigationBar(
          fixedColor: Colors.black,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: [
            BottomNavigationBarItem(
              label: 'Home',
              icon: Icon(Icons.home),
              backgroundColor: Colors.grey,
            ),
            BottomNavigationBarItem(
              backgroundColor: Colors.grey,
              label: 'Search',
              icon: Icon(Icons.settings),
            ),
            BottomNavigationBarItem(
              backgroundColor: Colors.grey,
              label: 'Post',
              icon: Icon(Icons.post_add),
            ),
            BottomNavigationBarItem(
              backgroundColor: Colors.grey,
              label: 'Group',
              icon: Icon(Icons.group),
            ),
            BottomNavigationBarItem(
              backgroundColor: Colors.grey,
              label: 'Profile',
              icon: Icon(Icons.person),
            ),
          ],
          currentIndex: currentIndex,
          onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
        ),
      );
}

This is the looks for the error messages

CodePudding user response：

The issue is you are naming the widget BottomNavigationBar which is the default(same name) widget provided by Flutter.

Change your class name to something else like

class MyBottomNavigationBar extends StatefulWidget { //this class name
  @override
  State<MyBottomNavigationBar> createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int currentIndex = 0;
  final screens = [];
  @override
  Widget build(BuildContext context) => Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          fixedColor: Colors.black,
          showSelectedLabels: false,
          showUnselectedLabels: false,