Flutter's BottomNavigationBar not updating selected item on tap - flutter

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

Also in addition don't write the ontapped() in the build method as it was creates the same instance and never updates the view.

Answer 2

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.