Adding a BottomBar in a Flutter app returning error-CodePudding

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(),
   ],
  ), // 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

CodePudding user response：

Try putting the BottomBar widget inside a Flex widget.

CodePudding user response：

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.