Bottom nav bar that renders UI using state

render_bottom_nav_bar_ui_using_state.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rock Paper Scissors',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

/// This defines the state under the hood
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// If the widget needs to persist its state, we can
/// no longer use stateless widget.
class _MyHomePageState extends State<MyHomePage> {
  /// We define the current focused index here
  /// it keeps track of which button is currently
  /// being tapped, and it should change every time
  /// a new tap event happens.
  int _currentIndex = 0;
  
  final List<BottomNavigationBarItem> navItemList = [
    BottomNavigationBarItem(
      icon: Icon(Icons.casino),
      title: Text('Rock!'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.casino),
      title: Text('Paper!'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.casino),
      title: Text('Scissor!'),
    )
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rock Paper Scissors')),
      body: Center(child: Text('Coming soon ...')),
      bottomNavigationBar: BottomNavigationBar(
        /// This tells the bottom navigation bar to
        /// focus on the button that is last tapped
        currentIndex: _currentIndex,
        /// Here we update the tap event handler to
        /// update the state of tap, updating
        /// _currentIndex with the new one that
        /// is being tapped
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: navItemList,
      ),
    );
  }
}