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:

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:

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