Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Very small renderflex error during page navigation #22

Open
sgalway00 opened this issue Jan 12, 2020 · 1 comment
Open

Very small renderflex error during page navigation #22

sgalway00 opened this issue Jan 12, 2020 · 1 comment

Comments

@sgalway00
Copy link

sgalway00 commented Jan 12, 2020

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.

@Shakle
Copy link

Shakle commented Feb 10, 2020

Yes, when there is not much space, but visually enough it shows renderflex for a second during the animation. In release mode it does not give errors, but would be fine to fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants