Rock paper scissors with bottom navigation bar

game_with_bottom_nav_bar.dart

import 'dart:math';

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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  int _playIndex = 0;
  final List<BottomNavigationBarItem> navItemList = [
    BottomNavigationBarItem(
      icon: Icon(Icons.casino, color: Colors.white),
      title: Text('Rock!', style: TextStyle(color: Colors.white)),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.casino, color: Colors.white),
      title: Text('Paper!', style: TextStyle(color: Colors.white)),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.casino, color: Colors.white),
      title: Text('Scissor!', style: TextStyle(color: Colors.white)),
    )
  ];
  static const List<MaterialColor> colors = [
    Colors.cyan,
    Colors.blue,
    Colors.teal
  ];
  
  /// Here is a list that can be potentially
  /// played back to the user.
  static const List<Text> playList = [
    Text('Rock!'),
    Text('Paper!'),
    Text('Scissor!'),
  ];
  
  /// To add some fun, we want the Flutter
  /// app to play back randomly, so we initializes
  /// a random number generator here.
  final randGen = Random.secure();

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
      
      /// Here every time the user taps one of
      /// the three buttons, a random integer
      /// will be generated out of 0, 1, 2 and
      /// it will then be used to represent one
      /// of rock, paper, and scissors to play
      /// back to the user.
      _playIndex = randGen.nextInt(3);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rock Paper Scissors'),
        backgroundColor: colors[_currentIndex],
      ),
      backgroundColor: colors[_currentIndex][100],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Here it will choose the random generated
            /// index and render the result (one of rock,
            /// paper, and scissors) back to the user.
            playList[_playIndex],
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: colors[_currentIndex],
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: navItemList,
      ),
    );
  }
}