How to make custom BottomNavigationBar in flutter with source code

To create a bottom sheet with the given BottomNavigationBar code in a Flutter application, you can follow these steps:

1. Create a new Flutter project (if you haven’t already).
2. Set up the basic structure of your Flutter app, including a Scaffold with a BottomNavigationBar.
3. Implement the bottom sheet functionality which will be triggered when an item in the BottomNavigationBar is tapped.

Here is a step-by-step guide:

Step 1: Set Up Your Flutter Project

If you haven’t already set up a Flutter project, you can create one using the following command in your terminal:

flutter create bottom_sheet_example

Navigate into your project directory:

cd bottom_sheet_example

Step 2: Modify the Main File

Open the lib/main.dart file and replace its contents with the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('My Dairy Page'),
    Text('Support Group Page'),
    Text('Talk Now Page'),
    Text('Buddy Connect Page'),
    Text('Appointment Page'),
  ];

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

  void _showBottomSheet(BuildContext context, int index) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          height: 200,
          child: Center(
            child: _widgetOptions.elementAt(index),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.book),
            label: 'My Dairy',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.groups),
            label: 'Support Group',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Talk Now',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat_bubble_outline),
            label: 'Buddy Connect',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: 'Appointment',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.black.withOpacity(0.8),
        selectedLabelStyle: TextStyle(
          color: Colors.green,
          fontSize: 10,
        ),
        unselectedLabelStyle: TextStyle(
          fontSize: 10,
          color: Colors.black.withOpacity(0.8),
        ),
        selectedIconTheme: const IconThemeData(
          size: 20,
        ),
        unselectedIconTheme: const IconThemeData(
          size: 20,
        ),
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

Step 3: Run Your App

Now, run your app using the following command:

flutter run

Explanation:

1. Main File Setup: The MyApp class sets up the MaterialApp with a basic theme and the home page as MyHomePage.
2. State Management: The _MyHomePageState class manages the selected index of the BottomNavigationBar and defines the options for each tab.
3. BottomNavigationBar: The BottomNavigationBar is configured with five items. The _onItemTapped method updates the selected index and shows the bottom sheet.
4. Bottom Sheet: The _showBottomSheet method uses showModalBottomSheet to display a bottom sheet with the content corresponding to the selected tab.

This setup provides a basic implementation of a BottomNavigationBar that shows a bottom sheet when an item is tapped. You can customize the content of the bottom sheet and the appearance of the BottomNavigationBar items as needed.

Output

Here’s the correct UI for the code in image form BottomNavigationBar code in a Flutter:

This image accurately represents the BottomNavigationBar and the bottom sheet functionality as described in the code.

Related Articles

• How to make Ludo app in Flutter with Source Code Step by step
• How to make PDF Reader app in Flutter with Source Code Step by step
• How to make QR Scanner app in Flutter with Source Code Step by step
• How to Make a ToDo App with Flutter with source Code StepWise in 2024
• What is package in Flutter (Dart) with example in 2024

How to debugg our flutter application