dot_bottom_navigation_bar

Description:

dot bottom navigation bar

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
copied to clipboard
Then, run:
flutter pub get
copied to clipboard
Then import the package in your dart code:
import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
copied to clipboard
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),
),
],
)
copied to clipboard

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.
)

copied to clipboard

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),
);
}
}



copied to clipboard
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