custom bottom navigation bar in flutter

Today in this post we are going to make a custom button navigation bar in flutter. We have created a very easy button navigation. If you want to implement this bottom navigation in your app then as told by us. You can implement the code of this bottom navigation in your app

.

To create your bottom navigation you first need to create a file named bottomnavigation.dart. Then copy the code given by us and paste it in your file.

Buttomnavigation.dart

 
        
        import 'package:flutter/material.dart';

class InvestmentScreen extends StatefulWidget {
  @override
  _InvestmentScreenState createState() => _InvestmentScreenState();
}

class _InvestmentScreenState extends State {
  int _selectedIndex = 0; // Default selected index
  bool _isPortfolioSelected = false; // Track portfolio selection

  void _onItemTapped(int index) {
    if (_selectedIndex == index) return; // Prevent redundant navigation

    setState(() {
      _selectedIndex = index;
      _isPortfolioSelected = index == 1;
    });

    // Navigate to different screens
    switch (index) {
      case 0:
      // Stay on Orders screen
        break;
      case 1:
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => PortfolioScreen()),
        );
        break;
      case 2:
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => SettingsScreen()),
        );
        break;
      case 3:
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ProfileScreen()),
        );
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffFFFFFF),
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text("App2k" ,style: TextStyle(color: Colors.white),),
      ),

      body: Center(
          child:  Text("Home", style: TextStyle(color: Colors.black,fontWeight: FontWeight.w700),)

      ),

      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        child: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.black54,
          showUnselectedLabels: true,
          onTap: _onItemTapped,
          items: [
            _buildNavItem(Icons.shopping_cart, "Home", 0),
            _buildNavItem(Icons.pie_chart, "Portfolio", 1),
            _buildNavItem(Icons.settings, "Settings", 2),
            _buildNavItem(Icons.person, "Profile", 3),
          ],
        ),
      ),
    );
  }

  BottomNavigationBarItem _buildNavItem(IconData icon, String label, int index) {
    bool isSelected = _selectedIndex == index;
    return BottomNavigationBarItem(
      label: label,
      icon: Column(
        children: [
          Icon(icon),
          if (isSelected)
            Container(
              margin: EdgeInsets.only(top: 4),
              width: 6,
              height: 6,
              decoration: BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
        ],
      ),
    );
  }
}

// Dummy Screens (Make sure to import actual ones)
class PortfolioScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Portfolio")),
      body: Center(child: Text("Portfolio Screen")),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Settings")),
      body: Center(child: Text("Settings Screen")),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Profile")),
      body: Center(child: Text("Profile Screen")),
    );
  }
}


    

Code Explanation

• The Flutter Material package is imported.
• A class named InvestmentScreenState has been created. Inside this there are some variables which contain index and bool.
• A method named ninitimtapapad has been created which clicks on the button navigation and after clicking the user gets transferred to different screens.
• The navigation has been designed inside the bottom navigation bar and all the items have been defined along with it. You can change it with the icon as per your wish and you can also increase its number as per your wish.
• Finally, different classes have been created below, portfolio screen, setting screen, profile screen, etc., which get transferred on clicking the user button. You can transfer it to the screen created by you as per your requirement.

Output