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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter