Flutter's BottomNavigationBar not updating selected item on tap

Question

I'm new at Flutter and currently trying very simple exercises to understand the basics. I have just created a basic Home with a BottomNavigationBar at, well, the screen bottom. But when I tap a bar icon, it doesn't switch colors to appear as if it was tapped. I need to reload it to update it. I can't update the icon state from 'MyBottmNavigationBar' class... If I simply copy/paste Flutter.dev sample code it works... What I need to fix in my code? Feel free to point any errors or tips! Thanks in advance!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Home();
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyScaffold(),
    );
  }
}

class MyScaffold extends StatefulWidget {
  @override
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hey Flutter'),),
      body: MyListView(),
      bottomNavigationBar: MyBottomNavigationBar(),
    );
  }
}


class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(2),
      children: <Widget>[
        Container(
          height: 50,
          color: Colors.amber[600],
          child: const Center(child: Text('Entry A')),
        ),
        Container(
          height: 50,
          color: Colors.amber[500],
          child: const Center(child: Text('Entry B')),
        ),
        Container(
          height: 50,
          color: Colors.amber[100],
          child: const Center(child: Text('Entry C')),
        ),
        Container(
          height: 50,
          color: Colors.amber[600],
          child: const Center(child: Text('Entry A')),
        ),
      ],
    );
  }
}

class MyBottomNavigationBar extends StatefulWidget {
  MyBottomNavigationBar({Key key}) : super(key: key);

  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;
  void _onItemTapped(int index){
    _selectedIndex = index;
    print('Selected: ${_selectedIndex} CurrentIndex: ${index}');
  }
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.pink,
      onTap: _onItemTapped,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.table_chart),
          title: Text('Projects'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.people),
          title: Text('Teams'),
        ),
      ],
    );
  }
}
```

Answer 1

You forgot to call setState in your _onItemTapped function.

To fix this problem, replace the code below with your _onItemtapped function:

void _onItemTapped(int index){
    // add the setstate callback here
    setState(() { 
    _selectedIndex = index;
    });
    print('Selected: ${_selectedIndex} CurrentIndex: ${index}');
  }

I hope this helps.