Bottom Navigation Bar in Flutter

flutter create bottom_nav
Flutter create command for creating project in terminal
  1. Visual Studio Code
  2. Android Studio
  3. any other IDE of your choice
import 'package:flutter/material.dart';void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Bottom Nav',
home: HomeScreen(),
);
}
}
import 'package:flutter/material.dart';

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

@override
State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home Screen"),
),
body: const Center(
child: Text("Bottom bar below"),
),
);
}
}
Home Screen with title and body text
Home Screen
bottomNavigationBar: BottomNavigationBar(
items: [],
),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "Search",
),
],
Home Screen with bottom bar
class _HomeScreenState extends State<HomeScreen> {  int index = 0;  @override
Widget build(BuildContext context) {
...
bottomNavigationBar: BottomNavigationBar(
currentIndex: index,
onTap: (int changeIndex) {
setState(() {
index = changeIndex;
});
},
...
The output of bottom bar

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Parashift Recommends #20: JavaScript, nuclear power, music, and more

iOS: send push notifications with Firebase

Draggable bottom Navigation Drawer

Finally — How to use iPad as a work horse?

Basic of inheritance in Ruby

How To Integrate Metals API In A Google Sheet?

An approach to learn a programming language.

Top 3 FlightAware Alternatives For Flights Tracking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yash Adulkar

Yash Adulkar

More from Medium

How to add AudioWaveforms to your Flutter apps?

Flutter 2.10: Flutter Stable Support for Windows and Other Updates

Best Flutter State Manager You Should Learn and Try

Flutter scroll parent when ListView reach bottom