dot_navigation_bar 0.1.1 dot_navigation_bar: ^0.1.1 copied to clipboard
Simple smooth animations, providing a nice and cleanUI/UX Bottom Nav Bar.
Dot Navigation Bar #
A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the appearance of the navigation bar with simple smooth animations, providing a nice and clean UI/UX.
Getting Started #
To install, add it to your pubspec.yaml
file:
dependencies:
dot_navigation_bar:
import 'package:dot_navigation_bar/dot_navigation_bar.dart';
How to use it #
call DotNavigationBar
's constructor:
Widget build(BuildContext context) {
return Scaffold(
body: Center(),
bottomNavigationBar: DotNavigationBar(
currentIndex: _SelectedTab.values.indexOf(_selectedTab),
onTap: _handleIndexChanged,
dotIndicatorColor: Colors.black,
items: [
],
),
);
}
basic implementation #
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Image.asset("assets/IMG.png"),
),
bottomNavigationBar: DotNavigationBar(
currentIndex: _SelectedTab.values.indexOf(_selectedTab),
onTap: _handleIndexChanged,
// dotIndicatorColor: Colors.black,
items: [
/// Home
DotNavigationBarItem(
icon: Icon(Icons.home),
selectedColor: Colors.purple,
),
/// Likes
DotNavigationBarItem(
icon: Icon(Icons.favorite_border),
selectedColor: Colors.pink,
),
/// Search
DotNavigationBarItem(
icon: Icon(Icons.search),
selectedColor: Colors.orange,
),
/// Profile
DotNavigationBarItem(
icon: Icon(Icons.person),
selectedColor: Colors.teal,
),
],
),
);
}
The constructor has 17 attributes related to the API:
items
: A list of tabs to display, ieHome
,Profile
,Cart
, etccurrentIndex
: The tab to display.onTap
:Returns the index of the tab that was tapped.selectedItemColor
:The color of the icon and text when the item is selected.unselectedItemColor
: The color of the icon and text when the item is not selected.margin
:A convenience field for the margin surrounding the entire widget.itemPadding
:The padding of each item.duration
: The transition duration.curve
: The transition curve.dotIndicatorColor
:The color of the Dot indicator.