Flutter Bottom Navigation Bar Demo

main.dart

// To learn more visit - https://www.akshatapp.com/tutorials/flutter-tutorial

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Bottom Navigation Bar Demo',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: MyHomePage(),
    );
  }
}

// Page 1 - Create Product

class CreateTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.edit,
          color: Color(0xFFD50000),
        ),
      ),
    );
  }
}

// Page 2 - Manage Products

class ManageTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.view_list,
          color: Colors.pink,
        ),
      ),
    );
  }
}

// Page 3 - Product Info

class InfoTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.info,
          color: Colors.blue,
        ),
      ),
    );
  }
}

// BottomNavigationBar - Stateful Widget

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

class _MyHomePageState extends State<MyHomePage> {
  Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0:
        return CreateTabPage();

      case 1:
        return ManageTabPage();

      case 2:
        return InfoTabPage();
        break;
      default:
        return InfoTabPage();
    }
  }

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottom Navigation Bar Demo'),
      ),
      body: SafeArea(
        child: callPage(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              title: Text("Create Product"),
              activeIcon: Icon(
                Icons.edit,
                color: Color(0xFFD50000),
              ),
              icon: Icon(
                Icons.edit,
                color: Color(0xFFC0C0C0),
              )),
          BottomNavigationBarItem(
              title: Text("Manage Products"),
              activeIcon: Icon(
                Icons.view_list,
                color: Colors.pink,
              ),
              icon: Icon(
                Icons.view_list,
                color: Color(0xFFC0C0C0),
              )),
          BottomNavigationBarItem(
              title: Text("Product Info"),
              activeIcon: Icon(
                Icons.info,
                color: Colors.blue,
              ),
              icon: Icon(
                Icons.info,
                color: Color(0xFFC0C0C0),
              ))
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.black,
        onTap: _onItemTapped,
      ),
    );
  }
}