BottomNavigationBar Widget in Flutter

3 Followers

Aug 16, 2024

14 sec read

833

BottomNavigationBar resembles the AppBar but is displayed at the bottom section of the page. It is possible to use the BottomNavigationBar() or BottomAppBar() widget on Scaffold.

The use of Scaffold, AppBar, BottomNavigationBar, and BottomNavigationBarItem.

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

int _currentIndex = 0;

final List<Widget> _pages = [

Center(child: Text('Home Page')),

Center(child: Text('Search Page')),

Center(child: Text('Profile Page')),

];

void _onTap(int index) {

setState(() {

_currentIndex = index;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('BottomNavigationBar Example'),

body: _pages[_currentIndex],

bottomNavigationBar: BottomNavigationBar(

currentIndex: _currentIndex,

items: const [

BottomNavigationBarItem(

icon: Icon(Icons.home),

label: 'Home',

BottomNavigationBarItem(

icon: Icon(Icons.search),

label: 'Search',

BottomNavigationBarItem(

icon: Icon(Icons.person),

label: 'Profile',

onTap: _onTap,

);

}

BottomNavigationbar Widget in Flutter - Dynamic Navigation - Flutter Tutorial

Flutter Widgets BottomNavigationBar BottomNavigationBar in Flutter BottomNavigationBar widget in Flutter Flutter Widgets BottomNavigationBarItem Widget

Published by:

3 Followers

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.