dot_bottom_navigation_bar 0.0.1

A Flutter package for a customizable bottom navigation bar with dot indicators.

Dot Bottom Navigation Bar

https://github.com/muneeb-shahid/dot_bottom_navigation_bar/assets/115135886/b13d8d4c-38f1-4aa3-8367-66d0d7bc4a33

Introduction

The dot_bottom_navigation_bar package provides a customizable and visually appealing dotted bottom navigation bar for Flutter developers. This package allows you to easily integrate a bottom navigation bar into your Flutter application with smooth navigation between screens.

Features

Customizable Icons: Easily customize icons for both active and inactive states, with support for different icons per state.
Flexible Styling: Adjust font size for selected and unselected items, and set a custom background color for the navigation bar.
Seamless Integration: Simple integration into Flutter applications, compatible with various screen sizes and resolutions.
Responsive Design: Automatically adjusts to screen dimensions, ensuring a responsive design.
Intuitive Interaction:Responsive tap handling with the onTap callback for capturing user interactions.

Installation

To use dot_bottom_navigation_bar, add the following to your pubspec.yaml file:

dependencies:
  dot_bottom_navigation_bar: ^1.0.0

Then, run:

flutter pub get

Then import the package in your dart code:

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';

Usage

DotBottomNavigationBar

A customizable bottom navigation bar with dot-style icons.

DotBottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: _onItemTapped,
  items: [
    DotBottomNavigationBarItem(
      icon: Icon(Icons.home),
      activeIcon: Icon(Icons.home, color: Colors.blue),
      /// activeIcon: is a widget, so you can easily customize according to you need. 
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.search),
      activeIcon: Icon(Icons.search, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      activeIcon: Icon(Icons.favorite, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.person),
      activeIcon: Icon(Icons.person, color: Colors.blue),
    ),
  ],
)

DotBottomNavigationBarItem

A data class representing an item in the navigation bar.

DotBottomNavigationBarItem(
  icon: Icon(Icons.home),
  activeIcon: Icon(Icons.home, color: Colors.blue),
  /// activeIcon: is a widget, so you can easily customize according to you need. 
)

Complete Implementation

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
import 'package:example/view/favourite_view.dart';
import 'package:example/view/home_view.dart';
import 'package:example/view/setting_view.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: 'Dot Bottom Navigation Bar',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;
  final screen = [
    const HomeView(),
    const FavouriteView(),
    const SettingView(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screen[currentIndex],
      bottomNavigationBar: DotBottomNavigationBar(
          selectedFontSize: 0.0,
          unselectedFontSize: 0.0,
          onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: [
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.home,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.home_outlined,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.favorite_border,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.settings,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.settings_outlined,
                  color: Colors.green,
                )),
          ],
          currentIndex: currentIndex),
    );
  }
}

Issues

If you encounter any issues or have suggestions for improvement, please visit the GitHub repository and submit an issue or pull request.

Developed By

Muneeb Shahid