How to change background color of BottomNavigationBarItem(child) when user pressed? Not change all of navbar color

Solution for How to change background color of BottomNavigationBarItem(child) when user pressed? Not change all of navbar color
is Given Below:

I want every menu that I click will change color for each menu that is clicked, not for the entire color background of the nav bar.

Like the example:
Here

When a user clicks on the “Near Me” menu then the box on the menu will change color. But for the background/color box on the other menu, it is still black. Similarly, clicking on the other menus will change color to red and will not change the color of the menu that is not clicked (still black)

This my Code:

int _page = 0;
final List<Widget> _children = [
    MainPage(),
    MainPage(),
    MainPage(),
    MainPage(),
    MainPage(),
  ];

... 


bottomNavigationBar: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Color(0xFF3B3D58),
              primaryColor: Colors.white,
              textTheme: Theme.of(context).textTheme.copyWith(
                caption: TextStyle(color: Colors.grey)
              )
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: _page,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.add_circle),
                  title: Text('Add Place'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.near_me),
                  title: Text('Near Me'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.favorite),
                  title: Text('Favorite'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz),
                  title: Text('More'),
                ),
              ],
              onTap: onTabTapped,
            ),
          ),

And this is my result of my code:
Here

I found this workaround:
Try here:
https://dartpad.dev/?id=60405c72383f2114decc8486b427e03e&null_safety=true

code here:

import 'package:flutter/material.dart';


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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title="Flutter Code Sample";

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

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

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

/// This is the private State class that goes with MyStatefulWidget.
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: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      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: <BottomNavigationBarItem>[
          _bottomNavigationBarItem(Icons.home, 'Home'),
          _bottomNavigationBarItem(Icons.business, 'Home'),
          _bottomNavigationBarItem(Icons.school, 'Home'),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        elevation: 0,
        onTap: _onItemTapped,
      ),
    );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(
      IconData icon, String label) {
    return BottomNavigationBarItem(
      activeIcon: _navItemIcon(icon, label, Colors.red, Colors.white),
      icon: _navItemIcon(icon, label, Color(0xff3b3c58), Colors.grey),
      title: Padding(padding: EdgeInsets.all(0)),
    );
  }

  Row _navItemIcon(IconData icon, String label, Color? backgrondColor,
      Color? foregroundColor) {
    return Row(
      children: [
        Expanded(
          child: Container(
            color: backgrondColor,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                children: [
                  Icon(
                    icon,
                    color: foregroundColor,
                  ),
                  Text(
                    label,
                    style: TextStyle(color: foregroundColor),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}