dot_navigation_bar 0.1.1
dot_navigation_bar: ^0.1.1

Flutter Android iOS web

Simple smooth animations, providing a nice and cleanUI/UX Bottom Nav Bar.

Dot Navigation Bar #

version

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.

style1 preview

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, ie Home, Profile,Cart, etc
  • currentIndex: 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.
4
likes
100
pub points
58%
popularity

Simple smooth animations, providing a nice and cleanUI/UX Bottom Nav Bar.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

haptomee@gmail.com

License

GPL 3.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on dot_navigation_bar