main.dart

import 'package:flutter/material.dart';

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

  @override
  _BottomNavBarPageState createState() => new _BottomNavBarPageState();
}

class _BottomNavBarPageState extends State<BottomNavBarPage> {
  int currentIndex = 0;
  Color _backgroundColor = Colors.blue;

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(
          child: const Text('backgroundColor: green'),
          onPressed: () {
            setState(() {
              _backgroundColor = Colors.green;
            });
          },
        ),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        items: [
          new BottomNavigationBarItem(
            title: new Text("Page 1"),
            backgroundColor: _backgroundColor,
            icon: new Icon(Icons.dashboard),
          ),
          new BottomNavigationBarItem(
            title: new Text("Page 2"),
            backgroundColor: Colors.pink, // keep color static to show background color animation issue
            icon: new Icon(Icons.menu),
          ),
        ],
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(home: new BottomNavBarPage()));
}