آموزش پیاده سازی BottomNavigationBar در فلاتر

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class BottomNavBarPage extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.BOTTOM_NAV_BAR),
      ),
      body: Text("Body"),
      bottomNavigationBar: Container(
        color: RED,
        child: Text("this is bottom"),
      ),
    );
  }
}

Widget _bottomNormal()=> BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        backgroundColor: BLUE_DEEP,
        icon: Icon(
          Icons.home,
          size: 30,
        ),
        title: Text(
          "Home",
          style: TextStyle(fontSize: 30),
        ),
      ),
      BottomNavigationBarItem(
        backgroundColor: BLUE_DEEP,
        icon: Icon(
          Icons.assignment_ind,
          size: 30,
        ),
        title: Text(
          "User",
          style: TextStyle(fontSize: 30),
        ),
      )
    ],
  );

Widget _itemIconOnly() => BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            backgroundColor: BLUE_LIGHT,
            icon: Icon(
              Icons.home,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Home",
              style: TextStyle(fontSize: 30, color: RED),
            ),
            activeIcon: Icon(
              Icons.home,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            backgroundColor: BLUE_DEEP,
            icon: Icon(
              Icons.book,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Articles",
              style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
            ),
          ),
          BottomNavigationBarItem(
            backgroundColor: BLUE_DEEP,
            icon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "User",
              style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
            ),
          ),
        ],
      );

body: Container(
        alignment: Alignment.center,
        child: Text(
          contents,
          style: TextStyle(color: RED, fontSize: 40),
        ),
      ),

onTap: (index) {
          setState(() {
            _curIndex = index;
            switch (_curIndex) {
              case 0:
                contents = "Home";
                break;
              case 1:
                contents = "Articles";
                break;
              case 2:
                contents = "User";
                break;
            }
          });
        },

Widget _indexBottom() => BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Home",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 0 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.home,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.book,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Articles",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 1 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.book,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "User",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 2 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: RED,
            ),
          ),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            switch (_curIndex) {
              case 0:
                contents = "Home";
                break;
              case 1:
                contents = "Articles";
                break;
              case 2:
                contents = "User";
                break;
            }
          });
        },
      );