BottomNavigationBar in Flutter

main.dart

Haider Ali

·

Follow

Published in

Complete Flutter Guide

·

2 min read

·

May 27, 2024

--

Listen

Share

import '/pages/home.dart';
import '/pages/settings.dart';
import '/pages/about.dart';

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Mobile App Development'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List pages = [HomePage(), AboutPage(), SettingsPage() ];
  int selectedPage = 0;

  void navChanged(int index) {

    setState(() {
      selectedPage= index;
    });
  }
  @override
  Widget build(BuildContext context)  {
    return Scaffold(
        body:  pages[selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          onTap: navChanged,
          items: [
            // home
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: "Home"
            ),

            // Profile
            BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: "Profile"
            ),

            // Settings
            BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: "Settrings"
            ),
          ],
        ),
    );
  }
}

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context)  {
    return Scaffold(
        backgroundColor: Colors.green,
        body:  Center(
                child: Text("Home Page", style: TextStyle(fontSize: 30),),
                ),
        );

  }
}

about.dart

import 'package:flutter/material.dart';

class AboutPage extends StatelessWidget {

  @override
  Widget build(BuildContext context)  {
    return Scaffold(
      backgroundColor: Colors.yellow,
      body:  Center(
        child: Text("About Page", style: TextStyle(fontSize: 30)),
      ),
    );
  }
}

settings.dart

import 'package:flutter/material.dart';

class SettingsPage extends StatelessWidget {

  @override
  Widget build(BuildContext context)  {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body:  Center(
        child: Text("Settings Page", style: TextStyle(fontSize: 30)),
      ),
    );

  }
}