main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppPage(),
      theme: ThemeData(primaryColor: Colors.red),
    );
  }
}

class AppPage extends StatefulWidget {
  const AppPage({Key? key}) : super(key: key);

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

class _AppPageState extends State<AppPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("IndexedStack and bottomNavigationBar")),
        body: IndexedStack(
          index: _currentIndex,
          children: SetPage(),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: SetBottomNavigationBarItemList(),
          currentIndex: _currentIndex,
          fixedColor: Colors.blue,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ));
  }

  List<Widget> SetPage() {

    return [HomePage(), EmailPage(), PagesPage(), PLAYPage()];
  }

  List<BottomNavigationBarItem> SetBottomNavigationBarItemList() {
      final _bottomNavigationColor = Colors.blue;
      
    return [
      BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
            color: _bottomNavigationColor,
          ),
          label: 'HOME'),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.email,
            color: _bottomNavigationColor,
          ),
          label: 'Email'),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.pages,
            color: _bottomNavigationColor,
          ),
          label: 'PAGES'),
      BottomNavigationBarItem(
          icon: Icon(
            Icons.airplay,
            color: _bottomNavigationColor,
          ),
          label: 'AIRPLAY'),
    ];
  }
}