Make TabBarView take up all remaining space

1,218

Put TabBarView inside Expanded widget

Share:
1,218
UglyBob
Author by

UglyBob

Updated on December 11, 2022

Comments

  • UglyBob
    UglyBob over 1 year

    New to Flutter and can't figure out how to put size constraints on my UI so nothing overflows. Trying to make a little bit different UI with tabs, where I have some components above the tab bar. Basically I want something like this:

    --------------------
    |     Container    |
    --------------------
    |      TabBar      |
    --------------------
    |                  |
    |                  |
    |    TabBarView    |
    |                  |
    |                  |
    --------------------
    |     Container    |
    --------------------
    

    The problem is, I have no idea how to make the TabBarView take up the remaining space. My code example wont even run, just gives me an error like this:

    I/flutter ( 3875): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 3875): The following assertion was thrown during performResize(): I/flutter ( 3875): Horizontal viewport was given unbounded height. I/flutter ( 3875): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter ( 3875): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter ( 3875): vertical space in which to expand.

      Widget build(BuildContext context) {
        List<Tab> myTabs = <Tab>[
          Tab(text: 'TAB 1'),
          Tab(text: 'TAB 2'),
          Tab(text: 'TAB 3'),
        ];
    
        Widget topBar = Container(
            padding: EdgeInsets.all(10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Text("TEXT 1"),
                Text("TEXT 2"),
                Text("TEXT 3"),
              ],
            ));
    
        Widget bottomBar = Row(
          children: <Widget>[
            RaisedButton(child: Text("Cancel")),
            RaisedButton(child: Text("OK")),
          ],
        );
    
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: Text("Test"),
            ),
            body: Column(
              children: <Widget>[
                topBar,
                TabBar(
                  tabs: myTabs,
                ),
                TabBarView(
                  children: myTabs.map((Tab tab) {
                    return Container(
                      color: Colors.red,
                      child: Text(tab.text)
                    );
                  }).toList(),
                ),
              ],
            ),
            bottomNavigationBar: bottomBar,
          ),
        );
      }