Navigation bar in Flutter -with Code

User Interface:

Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        title: "Bottom Navigation Bar",
        debugShowCheckedModeBanner: false,
        home: bottom_navigation_insta(),
      ),
    );

class bottom_navigation_insta extends StatefulWidget {
  //const bottom_navigation_insta({Key key}) : super(key: key);

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

class _bottom_navigation_instaState extends State<bottom_navigation_insta> {
  int temp_indexed = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Instagram',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        backgroundColor: Colors.greenAccent,
        leading: Icon(Icons.photo_camera),
        centerTitle: true,
        actions: [
          Icon(Icons.send),
        ],
      ),
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: temp_indexed,
        // selectedFontSize: 20,

        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
              backgroundColor: Colors.blue),
          BottomNavigationBarItem(
              icon: Icon(Icons.search),
              title: Text('Search'),
              backgroundColor: Colors.red),
          BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              title: Text('Camera'),
              backgroundColor: Colors.black),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Person'),
              backgroundColor: Colors.purple),
        ],
        onTap: (index) {
          setState(() {
            temp_indexed = index;
          });
        },
      ),
    );
  }
}

Video

Contact Me:

Facebook Profile: Asim Irshad Facebook
LinkedIn Profile: Asim Irshad Linked In
GitHub Link:https://github.com/AsimIrshad
Youtube Channel Link: Learn Flutter Now