How to add multiple widgets to widget list

user_14662334 0
Viewed 405

I am currently working on my first flutter app and still learning. I thought I kind of figured out how to combine and add multiple widgets. The tap Bar is actually working. When I add the tap bar in a Column it is not working anymore. I would like to add a Bottom Navigation Bar. It is also working without the TapBar. But both combined with the Column and Widget List are not working and I cant figure out why not.

Widget build(BuildContext context) {
 return new Scaffold(
   appBar: new TabBar(
       controller: controller,
       labelColor: Colors.white,
       tabs: <Tab>[
         new Tab(
           icon: new Icon(
           Icons.arrow_back,
           color: Theme.of(context).primaryColor,
         )),
         new Tab(
             icon: new Icon(
           Icons.swap_calls,
           color: Theme.of(context).primaryColor,
         )),
         new Tab(
             icon: new Icon(
           Icons.favorite,
           color: Theme.of(context).primaryColor,
         )),
       ]),
   
   body: Column(
     children: <Widget>[
       new TabBarView(
         controller: controller,
         children: <Widget>[
           new first.Outfits(),
           new second.Swaps(),
           new third.Favorites()
         ],
       ),

       //BottomNavigationBar
       /*  new BottomNavigationBar(
         items: const <BottomNavigationBarItem>[
           BottomNavigationBarItem(
             icon: Icon(Icons.home),
             title: Text('Home'),
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.people),
             title: Text('Friends'),
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.person),
             title: Text('Profile'),
           ),
         ],
         // currentIndex: _selectedIndex,
         // onTap: _onItemTab,
       ),*/
       //  ],
       //),
     ],
   ),
 );
}```

Does anybody know what might be the reason ? Maybe it is the other Widgetlist in my TabBar Widget ? 
Thank you!
flutter-widget dart flutter widget
2 Answers

As you already used Scaffold just use it's bottomNavigationBar

Straightforward settle BottomNavigationBar in bottomNavigationBar property

The [bottomNavigationBar] is rendered below the [persistentFooterButtons] and the [body].

user_120523090

It's simple, wrap your TabBarView inside Expanded widget to use it into the Column

     Column(
        children: <Widget>[
          Expanded(
            child: new TabBarView(
              controller: controller,
              children: <Widget>[
                Text('Hi 1'),
                Text('Hi 2'),
                Text('Hi 3'),
              ],
            ),
          ),
        ],
     ),
user_64623760
Related