haptome/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.

Hello there , I'm Haptome! 👋

• 🔭 I’m currently working on Something BIG.
• 🌱 I’m currently learning more about { 🤔 } .
• 💬 Ask me about Flutter or any tech-related stuff.
• 📫 How to reach me: Linkendin , Email
• 😄 I'm almost spend 12+ hours working on private repos so i might be let to replay.

Languages and Tools:

Show some ❤️ by starring some of the repositories!

dot_navigation_bar's Issues

move on other page

can you tell me how i move my real screen when i click on icon..

Navigation with named routes

Hey there, lovely Navbar. I am experiencing an issue I can't seem to fix.

Navigation with named routes causes the Navbar to disappear on the next page. For example if I do a
Navigator.pushNamed(context, AppRouter.pageName)

Code being referenced in AppRouter

case AppRouter.pageName: return MaterialPageRoute( settings: const RouteSettings(name: AppRouter.pageName), builder: (context) => const PageName());

Could you assist please

Change to LGPL or MIT or BSD

Change License to Permissive ones. GPL-3.0 would require the application based on it to also be GPL-3.0.

There is bug when using material 3 "Size Error"

The navigation bar makes a size error when using material 3

The DotNavigationBar overflowed by 43 pixels on the bottom.

I tried to insert the DotNavigationBar for the first time and immediately the error appears: A RenderFlex overflowed by 43 pixels on the bottom.

I tried to fix it but i can't, can someone help me?

My code:

import 'package:flutter/material.dart';
import 'package:dot_navigation_bar/dot_navigation_bar.dart';


class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  
  int selectedIndex = 0;
  late PageController pageController;

  void _handleIndexChanged(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  void initState() {
    super.initState();
    pageController = PageController(initialPage: selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: const Text('Test'),
        ),
        body: Container(),
        extendBody: false,
        bottomNavigationBar: DotNavigationBar(
            margin: EdgeInsets.only(left: 10, right: 10),
            currentIndex: selectedIndex,
            dotIndicatorColor: Colors.white,
            unselectedItemColor: Colors.grey[300],
            onTap: _handleIndexChanged,
            items: [
              DotNavigationBarItem(
                icon: Icon(Icons.home),
                selectedColor: Colors.purple,
              ),
              DotNavigationBarItem(
                  icon: Icon(Icons.favorite_border),
                  selectedColor: Colors.pink
              ),
              DotNavigationBarItem(
                icon: Icon(Icons.search),
                selectedColor: Colors.orange,
              ),
              DotNavigationBarItem(
                icon: Icon(Icons.person),
                selectedColor: Colors.teal,
              ),
            ]
        )
    );
  }
}

How can I navigate another page with connect that navbar?

How to connect nav bar with page.?

Not floating in flutter 3.3

I'm using your package for flutter 3.3 with dart 2.18.1, and it has a background above of all screens, then it is not float, actually.
Please update your beautiful package.
Best regards.

Can't set margin between the indicator and the item itself

RangeError (index): Invalid value: Not in inclusive range 0..3: 4

Hello,

I am trying to use the DotNavigationbar plugin in flutter,

all is working but since i added a 5th item or basically a 4th index, it shows the error at the top
(RangeError (index): Invalid value: Not in inclusive range 0..3: 4)

This is the Screenshot of the item i added, working with 4 items only is okay, but i needed a 5th one,

Thanks

opacity property

Can you add opacity property to your package? In some situations I want to disable navigation bar .
Thank you in advance....

Overflow Error with DotNavigationBar in BottomAppBar

Description

I encountered an overflow error when using the DotNavigationBar within a BottomAppBar in my Flutter application. The error occurred due to excessive padding and margin values causing the content to exceed the available space.

Steps to Reproduce

Use DotNavigationBar within a BottomAppBar.

Set the following properties:

• dotIndicatorColor
• marginR
• paddingR
• itemPadding

Error Message :

A RenderFlex overflowed by 40 pixels on the bottom.

Solution

The issue was resolved by adjusting the default padding and margin values. Here are the working configuration values:

marginR: const EdgeInsets.only(bottom: 0, right: 40, left: 40)
paddingR: const EdgeInsets.only(bottom: 1, top: 5)
itemPadding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10)

Example :
return Scaffold( extendBody: true, body: activePage(_selectedPageIndex), bottomNavigationBar: Padding( padding: const EdgeInsets.only(bottom: 50), child: DotNavigationBar( dotIndicatorColor: Colors.transparent, marginR: const EdgeInsets.only(bottom: 0, right: 40, left: 40), paddingR: const EdgeInsets.only(bottom: 1, top: 5), itemPadding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10), items: [ DotNavigationBarItem(icon: Icon(Icons.category)), DotNavigationBarItem(icon: Icon(Icons.add)), DotNavigationBarItem(icon: Icon(Icons.filter_list_alt)), ], currentIndex: _selectedPageIndex, onTap: _selectPage, ), ), );

Visual Reference
Here is an image of how the navigation bar appears with the adjusted values:

it steals my scaffolds body size

it takes up more space than it appears, so I can't get a good view of the scaffold body

Increase nav bar width

Hello how can I increase the width of the floating nav bar as desired

Selected item is not centered

Disable Splash Color

Is there a way to disable the splash color when an item is tapped?