I am trying to implement a bottom navigation bar in a flutter app but I keep getting errors in my source code

Question

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

  @override
  State<BottomNavigationBar> createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<BottomNavigationBar> {
  List views = [
    const HomeView(),
    const CurrentLocationView(),
    const ProfileView(),
    const SettingsView()
  ];
  int currentIndex = 0;
  void onTap(int index) {
    currentIndex = index;

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[0],
       bottomNavigationBar:const BottomNavigationBar(
        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_outlined),
          ),
          BottomNavigationBarItem(
            label: 'Map',
            icon: Icon(Icons.map),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(Icons.settings),
          ),
          BottomNavigationBarItem(
            label: 'Profile',
            icon: Icon(Icons.person),
          ),
        ],
      ),
    );
  }
}

In Visual studio code, it highlights the following piece of code, which I will post below in red, and gives the following error messages:

The name "onTap" isn't defined. Try correcting the name to an existing named parameters name or defining the named parameter with the name onTap

The name "currentIndex" isn't defined. Try correcting the name to an existing named parameters name or defining the named parameter with the name "currentIndex."

The name "items" isn't defined. Try correcting the name to an existing named parameters name or defining the named parameter with the name "items."

It gives the same error for the other six lines of code below.

        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: <BottomNavigationBarItem>[

Answer 1

This is because your defined class ( BottomNavigationBar ) is the same as prebuilt class that comes with Flutter. you need to change that

   import 'package:flutter/material.dart';

class BottomNavigationScreen extends StatefulWidget { ////here, class name should be different from flutter built in classes
  const BottomNavigationScreen({super.key});

  @override
  State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}

class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
  List views = [
    const HomeView(),
    const CurrentLocationView(),
    const ProfileView(),
    const SettingsView()
  ];
  int currentIndex = 0;
  void onTap(int index) {
    currentIndex = index;

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[0],
       bottomNavigationBar:BottomNavigationBar(
        onTap: onTap,
        currentIndex:currentIndex,
        selectedItemColor: Colors.black54,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showUnselectedLabels: false,
        showSelectedLabels: false,
        elevation:0,
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(Icons.home_outlined),
          ),
          BottomNavigationBarItem(
            label: 'Map',
            icon: Icon(Icons.map),
          ),
          BottomNavigationBarItem(
            label: 'Settings',
            icon: Icon(Icons.settings),
          ),
          BottomNavigationBarItem(
            label: 'Profile',
            icon: Icon(Icons.person),
          ),
        ],
      ),
    );
  }
}

Answer 2

onTap is a Function which returns selected tab index whenever user changed tab.It gives red error because you've not defined onTap function.

Use Code as below,

onTap: (int index) {
      print("selected Tab Index : $index");
      }