Reputation: 922

Adding a BottomBar in a Flutter app returning error

In my flutter app, I have a home_screen.dart where there is a Scaffold and ListView inside it is children with the container. I have created a bottom bar in a separate file and I wanted to add it to the home_screen page and to be fixed it there, but I am getting the below error:

I/flutter (25157): RenderRepaintBoundary object was given an infinite size during layout.
I/flutter (25157): This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.
I/flutter (25157): The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#cb38f relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (25157):   creator: IndexedSemantics ← _SelectionKeepAlive ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← MediaQuery ← SliverPadding ← Viewport ← IgnorePointer-[GlobalKey#2f499] ← Semantics ← ⋯
I/flutter (25157):   parentData: index=2; layoutOffset=None (can use size)
I/flutter (25157):   constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (25157):   size: MISSING
I/flutter (25157):   index: 2
I/flutter (25157): The constraints that applied to the RenderRepaintBoundary were:
I/flutter (25157):   BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (25157): The exact size it was given was:
I/flutter (25157):   Size(411.4, Infinity)

Here is the home_screen

@Override
Widget build(BuildContext context) {
 return Scaffold(
  backgroundColor: Styles.bgColor,
  body: ListView(
   children: [
    Container(
     padding: const EdgeInsets.symmetric (horizontal: 20), 
     child: Column(
      children: [
       const Gap (40),
       Row (...), // Row
       const Gap (20),
       Container (...), // Container
       const Gap (20),
       Container(...), // Container
       const Gap (20),
       Container (...) // Container
      ],
     ), // Column
    ), // Container
    const Gap (25),
    const BottomBar(), <---------------------- Error is from here its placement 
   ],
  ), // ListView
 ); // Scaffold
}

Here is the bottombar:

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

  @override
  State<BottomBar> createState() => _BottomBarState();}

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;
  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    const Text("1"),
    const Text("2"),
    const Text("3")  ];
 ..........................
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        ..........................
        elevation: 10,
        items: const [
          BottomNavigationBarItem(),
          BottomNavigationBarItem(),
          BottomNavigationBarItem(),
          BottomNavigationBarItem()
        ],      ),    );  }}

How to fix this error to keep the bottom bar showing on the home screen

Upvotes: 0

Answers (3)

AkuKaku

Reputation: 48

I just tested the following code and it works for me. I get a scrollable ListView and a BottomBar, with no layout errors. (Only showing the build method for simplicity)

You need to place the BottomBar in the bottomNavigationBar property. Also you shouldn't have Scaffold in your BottomBar, it is only used for the layout of your screen.

  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
    title: Text(widget.title),
  ),
  body: ListView(
    children: [
      // your list of children
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
    selectedItemColor: Colors.amber[800],
   ),
  );
}

Upvotes: 1

niceumang

Reputation: 1431

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

  @override
  State<BottomBar> createState() => _BottomBarState();}

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;
  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    const Text("1"),
    const Text("2"),
    const Text("3")  ];
 ..........................
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      bottomNavigationBar: Column(mainAxisSize: MainAxisSize.min,children:[
BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        ..........................
        elevation: 10,
        items: const [
          BottomNavigationBarItem(),
          BottomNavigationBarItem(),
          BottomNavigationBarItem(),
          BottomNavigationBarItem()
        ],      ),    );])  }}

Check my above code

Add BottomNavigationBar into Column widget with mainAxisSize** because we need to specify appropriate height of bottom bar.

Upvotes: 1

Ankit Kumar Maurya

Reputation: 1217

Try putting the BottomBar widget inside a Flex widget.

Upvotes: 1

Adding a BottomBar in a Flutter app returning error

Answers (3)

Related Questions