Skip to content

Very small renderflex error during page navigation #22

Open
@sgalway00

Description

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions