我正在尝试在 flutter 应用程序中实现底部导航栏，但我的源代码中不断出现错误

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");
      }