BottomNavigationBar

    How to make custom BottomNavigationBar in flutter with source code

    DeepikaBy Updated:No Comments4 Mins Read

    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.

    <img decoding=

    Related Articles

    Share.

    Related Posts

    Leave A Reply