Dot Navigation Bar
Screen Shot
Video
Example Github Repo
[Example flutter project](https://github.com/alibirkanbayram/dot_navbar/tree/main/dot_navbar/example)Introduction
The dot_navbar package provides a customizable and visually appealing dotted bottom/top 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_navbar, add the following to your pubspec.yaml file:dependencies:
dot_navbar: ^0.0.1
riverpod: ^
flutter_riverpod: ^
hooks_riverpod: ^
Then, run:
flutter pub get
Then import the package in your dart code:
import 'package:dot_novbar/dot_navbar.dart';
Usage
First Step:
- This package used riverpod lib.
void main() {
runApp(
const ProviderScope(
child: MyApp(),
),
);
}
Dot NavigationBar
A customizable navigation bar .
Selected Icon color :selectedItemColor.
Unselected Icon color :unselectedItemColor.
IsBottom value : bottom or top.
DotNavBar(
dotMenuItems: SharedList.itemList,
navbarBackgroundColor: Colors.white,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.grey,
isBottom: true,
isTitleVisible: true,
dotMenuItems:[
DotMenuItemModel(
keyValue: 'home',
page: Container(
color: Colors.red,
),
icon: Icons.home,
),
DotMenuItemModel(
keyValue: 'search',
page: Container(
color: Colors.blue,
),
icon: Icons.search,
),
DotMenuItemModel(
keyValue: 'add',
page: Container(
color: Colors.green,
),
icon: Icons.add,
),
DotMenuItemModel(
keyValue: 'notifications',
page: Container(
color: Colors.yellow,
),
icon: Icons.notifications,
),
DotMenuItemModel(
keyValue: 'profile',
page: Container(
color: Colors.purple,
),
icon: Icons.person,
),
]
),
Dot Menu Item Model
A data class representing an item in the navigation bar.DotMenuItemModel(
keyValue: "Object Key Value",
page: widgets(),
icon: Icons.home,
)
Complete Implementation
import 'package:dot_navbar/dot_navbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: []);
runApp(
const ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: SharedConstants.appName,
home: DotNavBar(
navbarBackgroundColor: Colors.black,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.grey,
isBottom: true,
isTitleVisible: false,
dotMenuItems:[
DotMenuItemModel(
keyValue: 'home',
page: Container(
color: Colors.red,
),
icon: Icons.home,
),
DotMenuItemModel(
keyValue: 'search',
page: Container(
color: Colors.blue,
),
icon: Icons.search,
),
DotMenuItemModel(
keyValue: 'add',
page: Container(
color: Colors.green,
),
icon: Icons.add,
),
DotMenuItemModel(
keyValue: 'notifications',
page: Container(
color: Colors.yellow,
),
icon: Icons.notifications,
),
DotMenuItemModel(
keyValue: 'profile',
page: Container(
color: Colors.purple,
),
icon: Icons.person,
),
]
),
);
}
}