westdabestdb / bubble_bottom_bar Goto Github PK

I've been experiencing this issue on my Iphone 5s simulator. With 4 BubbleBottomBarItem and a FloatingActionButton docked in the bar, if the text is too long I've got a pixel overflow.

Steps to reproduce:

• Use a smartphone with a little screen size, Iphone 5s simulator (4 inches) in my case
• 4 items
• One of the item has a long title
• Click on the title

Might be the same as this issue: #6 but you said it has been fixed (I'm using version 1.2.0)

how can i use this plugin for rtl applications?

Can please provide an example with a fab button?

Null safety is in the second technical preview stage with flutter core support it's therefore time to start migrating packages. I'd be happy to open a PR for Null Safety if it isn't already in the works.

I keep getting this error: "Access denied finding property "vendor.debug.egl.swapinterval"" in the logcat when changing tabs on the One Plus 6t on OxygenOS Version: 9.0.13.

Results of Flutter Doctor:
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17763.437], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.2)
[!] IntelliJ IDEA Community Edition (version 2018.1)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code, 64-bit edition (version 1.33.1)
[√] Connected device (1 available)

! Doctor found issues in 1 categor

Hi, can you pls add (or show me how) set a max width to the bar?
I'd like to show it only on the half of screen, there is a way?

thx

I'm a flutter newbie.
I tried with the example you gave, and it worked. But I am confused how to apply with page changes while maintaining the bottom bar, like in TabBarView.
as I know, the function is placed here. thought.

void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

Thank you for your attention.

This way, nothing will happen when the bottombaritem is clicked if the property is set to disabled.

It has activeIndex issue, which will be solved. Use if you love to live dangerous 😛

How can i make the white part of the notch (as seen in the picture) be transparent?

If (hasInk) on an iPhone without physical home button (>= iPhone X) and you press and hold an icon of the bubble bottom bar (which is then animated through the hasInk feature) while simultaneously (with the same finger) touching the home indicator and swiping up, the ink fills up the icon and doesn't go away any more until you close and reopen the app.

https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern
As you can see, the first tab icon animation behave differently from the dribbble.

Hi i want to change the border radius of BubbleBottomBarItem widget , how can i do that ?

BubbleBottomBarItem( borderRadius : BorderRadius.circular(5.0), ...),

thanks for this package.

I put floating btn in the middle, centerdocked, and it obscures the bottom menu.

Build error is occurring after updating to Flutter v3.7 due to the addition of the Badge widget to the default material package. Badge is also defined in the Badges package dependency.

: Error: 'Badge' is imported from both 'package:badges/src/badge.dart' and 'package:flutter/src/material/badge.dart'.
../…/lib/bubble_bottom_bar.dart:195
      child: Badge(

I just added the BubbleBottomBar and I get this error:

I/flutter (16409): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (16409): The following NoSuchMethodError was thrown building _BottomNavigationTile(dirty): I/flutter (16409): The method 'withOpacity' was called on null. I/flutter (16409): Receiver: null I/flutter (16409): Tried calling: withOpacity(0.2)
Code:
bottomNavigationBar: BubbleBottomBar( opacity: .2, hasNotch: true, borderRadius: BorderRadius.vertical(top: Radius.circular(16)), backgroundColor: Color.fromARGB(255, 62, 39, 35), elevation: 8, currentIndex: _cIndex, onTap: (int index) { setState(() { _cIndex = index; }); }, fabLocation: BubbleBottomBarFabLocation.end, items: <BubbleBottomBarItem>[ BubbleBottomBarItem(title: Text("Test"), icon: Icon(Icons.book)), BubbleBottomBarItem(title: Text("Test"), icon: Icon(Icons.book)), BubbleBottomBarItem(title: Text("Test"), icon: Icon(Icons.book)), BubbleBottomBarItem(title: Text("Test"), icon: Icon(Icons.book)), ], )
or formated code here

This is wonderful tabbar, however, how to using it in cupertino scaffold?

Randomly with no changes my code th bubble became large.

Hi, Your bottom bar is the best and thanks for letting to use widgets in icons.
Need an urgent fix.. because we are going to release soon (Using your bar 👍 )

Steps to reproduce:

• Add 5 items
• Better write at least 1 long title ('Favorites')
• Click on tabs

Actual result:

• A RenderFlex overflowed by 9.0 pixels on the right. appears for a second during animation.
• It is possible to fix, probably some spaceBetween or something..
• You can check the animation implementation here if it helps.. https://pub.dartlang.org/packages/bottom_navy_bar

Hi,

How can we achieve to have multiple FAB buttons (i.e integrating or using other framework).
It has weird screen, please see the screenshot below.

Thanks.

I appear to have just run into this problem. It only appears for a split second. I feel it might be the same as #6

I'm using bubble_bottom_bar 1.2.0

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 15 pixels on the right.

The relevant error-causing widget was
    BubbleBottomBar 
lib/home_page.dart:366
The overflowing RenderFlex has an orientation of Axis.horizontal.

Here's my code:

double fontSize = 12;
return Container(
                width: pageWidth,
                child: BubbleBottomBar(
                  opacity: 0.4,
                  iconSize: 20,
                  currentIndex: widget.currentIndex,
                  onTap: changePage,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
                  elevation: 8,
                  items: <BubbleBottomBarItem>[
                    BubbleBottomBarItem(
                        backgroundColor: Colors.orange,
                        icon: Icon(
                          Icons.home,
                          color: Colors.black,
                        ),
                        activeIcon: Icon(
                          Icons.home,
                          color: Colors.black,
                        ),
                        title: Text(
                          'Home',
                          style: TextStyle(
                              fontSize: fontSize,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        )),
                    BubbleBottomBarItem(
                        backgroundColor: Colors.orange,
                        icon: Icon(
                          Icons.record_voice_over,
                          color: Colors.black,
                        ),
                        activeIcon: Icon(
                          Icons.record_voice_over,
                          color: Colors.black,
                        ),
                        title: Text(
                          'Marshal',
                          style: TextStyle(
                              fontSize: fontSize,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        )),
                    BubbleBottomBarItem(
                        backgroundColor: Colors.orange,
                        icon: Icon(
                          Icons.directions_walk,
                          color: Colors.black,
                        ),
                        activeIcon: Icon(
                          Icons.directions_walk,
                          color: Colors.black,
                        ),
                        title: Text(
                          'Walker',
                          style: TextStyle(
                              fontSize: fontSize,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        )),
                    BubbleBottomBarItem(
                        backgroundColor: Colors.orange,
                        icon: Icon(
                          Icons.tv,
                          color: Colors.black,
                        ),
                        activeIcon: Icon(
                          Icons.tv,
                          color: Colors.black,
                        ),
                        title: Text(
                          'Display',
                          style: TextStyle(
                              fontSize: fontSize,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        )),
                    BubbleBottomBarItem(
                        backgroundColor: Colors.orange,
                        icon: SettingsIcon(),
                        activeIcon: SettingsIcon(),
                        title: Text(
                          'Settings',
                          style: TextStyle(
                              fontSize: fontSize,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        ))
                  ],
                ),
              );

If I change the title of the last item to 'Set', the problem goes away. If I reduce the icon size down I can eventually get the problem to go away as well, but by that time the text is uselessly small. I've tried removing the width constraint on the container with no luck either.

The current Dart SDK version is 2.1.0-dev.9.4.flutter-f9ebf21297.

Because [proj name] depends on bubble_bottom_bar from git which requires SDK version >=2.1.0 <3.0.0, version solving failed.

Kindly update to null safety

Hello.
I have an app, where default fab location is BubbleBottomBarFabLocation.end and user can change location to BubbleBottomBarFabLocation.center. It works, but there is a problem with pages indexes. Pages indexes are diffrent when fabLocation: BubbleBottomBarFabLocation.center and fabLocation: BubbleBottomBarFabLocation.end and it doesn't depends on the index of BubbleBottomBarItem in items. I think, the page index should be independent from fabLocation.
Can you make a fix for this bug?
Thanks,
Matthew

Do you think its possible to add badge support to this package
from your other package. ? https://github.com/westdabestdb/bottom_navigation_badge

Hello,

I get this error message when trying to use this repository:
NoSuchMethodError: THe method 'withOpcaity' was called on null. Receiver: null tried calling: withOpacity(0.2)

I am using similar code as in your example:

bottomNavigationBar: BubbleBottomBar( opacity: 0.2, borderRadius: BorderRadius.vertical(top: Radius.circular(16)), elevation: 8, currentIndex: _selectedPage, onTap: (int index) { setState(() { _selectedPage = index; }); }, items: <BubbleBottomBarItem>[ BubbleBottomBarItem( icon: Icon(FontAwesomeIcons.question, color: Colors.black87,), title: Text('Explore', style: TextStyle(color: Colors.black87),), ), BubbleBottomBarItem( icon: Icon(FontAwesomeIcons.random, color: Colors.black87), title: Text('Lovers', style: TextStyle(color: Colors.black87),), ), BubbleBottomBarItem( icon: Icon(FontAwesomeIcons.heart, color: Colors.black87), title: Text('Matches', style: TextStyle(color: Colors.black87),) ), BubbleBottomBarItem( icon: Icon(Icons.person, color: Colors.black87), title: Text('Profile', style: TextStyle(color: Colors.black87),), ), ] ),

Thanks in advance

error build: ../../../development/flutter/.pub-cache/hosted/pub.dev/bubble_bottom_bar-2.0.0/lib/bubble_bottom_bar.dart:195:14: Error: ‘Badge’ is imported from both ‘package:badges/src/badge.dart’ and ‘package:flutter/src/material/badge.dart’.

Add NavigationRail with the same design as the current bottom bar. NavigationRail docs

I have 6 BubbleBottomBarItem on the bottom navigation bar
When I run the text is incomplete and I get an error "Overflow by 0.968"