TabView expand to bottom of the page

Question

When ever I run the following code, I receive the error: A RenderFlex overflowed by 99523 pixels on the bottom.. I have tried various fixes to error like putting expanded widgets as children of the TabView and other combinations but none seems to work. I am trying to achieve the picture below. I have seen various solutions where the TabView widget is wrapped in an expanded widget but nothing is working.

below is my current code.

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> {

  final _auth = FirebaseAuth.instance;
  String request;
  FirebaseUser loggedInUser;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser () async {
    try{
      final user = await _auth.currentUser();
      if (user != null){
        loggedInUser = user;
        print(loggedInUser.email);
      }
    } catch (e){
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kSnow,//Color(0xffDCE3E5),
      appBar: AppBar(
        backgroundColor: kSnow,
        leading: IconButton(
          icon: Icon(Icons.menu),
          iconSize: 30.0,
          color: kOnyx,
          onPressed: () {},
        ),
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(
              Icons.person,
              color: kOnyx,
              size: 30.0,
            ),
            label: Text('Log Out'),
            onPressed: () {
              _auth.signOut();
              Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: kSnow,
            padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
            child: FractionallySizedBox(
              widthFactor: 1.0,
              child: Text(
                'DISCOVER',
                style: TextStyle(
                    color: kOnyx,
                    fontSize: 30.0,
                    //fontWeight: FontWeight.w600,
                    fontFamily: 'Baukasten'),
              ),
            ),
          ),
          DefaultTabController(
            length: 4,
            child: Column(
              children: <Widget>[
                TabBar(
                  isScrollable: true,
                  labelColor: kOnyx,
                  unselectedLabelColor: kFossil,
                  indicatorSize: TabBarIndicatorSize.label,
                  indicator: BoxDecoration(
                      color: kSnow),
                  tabs: [Tab(text: 'HOME'), Tab(text: 'CREATE'), Tab(text: 'PROFILE'), Tab(text: 'SETTINGS')],
                  indicatorColor: kOnyx,
                  labelStyle: TextStyle(
                    //ntSize: 10.0,
                    fontFamily: 'Baukasten'
                  ),
                ),
                TabBarView(
                  children: <Widget>[
                    Text('hello'),
                    Text('hello'),
                    Text('hello'),
                    Text('hello')
                  ],
                )
              ],
            ),
          ),
          //Container(height: 45, color: kOnyx,),
        ],
      ),
    );
  }
}

current ouput:

Does this answer your question ? https://stackoverflow.com/questions/53747149/how-to-create-a-bounded-scrollable-tabbarview — void, Jul 30 '20 at 05:01
thank you, but no. I am not interested in using a Sliverbar. I would like my current header to remain in view. — vixplays, Jul 30 '20 at 05:05

void · Accepted Answer · 2020-07-30T06:18:43.523

The widget causing the overflow was the nested Column which was given an unbounded height, I added a demo code using yur widget tree as an example. Check below:

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> with SingleTickerProviderStateMixin {

  final _auth = FirebaseAuth.instance;
  String request;
  FirebaseUser loggedInUser;
    // create a tab controller 
  TabController _tabController;

  @override
  void initState() {
    // create a tab controller 
    _tabController = TabController(length: 4, vsync: this);
    // TODO: implement initState
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser () async {
    try{
      final user = await _auth.currentUser();
      if (user != null){
        loggedInUser = user;
        print(loggedInUser.email);
      }
    } catch (e){
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kSnow,//Color(0xffDCE3E5),
      appBar: AppBar(
        backgroundColor: kSnow,
        leading: IconButton(
          icon: Icon(Icons.menu),
          iconSize: 30.0,
          color: kOnyx,
          onPressed: () {},
        ),
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(
              Icons.person,
              color: kOnyx,
              size: 30.0,
            ),
            label: Text('Log Out'),
            onPressed: () {
              _auth.signOut();
              Navigator.push(context, MaterialPageRoute(builder: (context) => Authentication()));
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: kSnow,
            padding: EdgeInsets.only(left: 15.0, top: 15.0, bottom: 30.0),
            child: FractionallySizedBox(
              widthFactor: 1.0,
              child: Text(
                'DISCOVER',
                style: TextStyle(
                    color: kOnyx,
                    fontSize: 30.0,
                    //fontWeight: FontWeight.w600,
                    fontFamily: 'Baukasten'),
              ),
            ),
          ),
           DefaultTabController(
            length: 4,
                      child: TabBar(
              controller: _tabController,
              isScrollable: true,
              labelColor: kOnyx,
              unselectedLabelColor: kFossil,
              indicatorSize: TabBarIndicatorSize.label,
              indicator: BoxDecoration(color: kSnow),
              tabs: [
                Tab(text: 'HOME'),
                Tab(text: 'CREATE'),
                Tab(text: 'PROFILE'),
                Tab(text: 'SETTINGS')
              ],
              indicatorColor: kOnyx,
              labelStyle: TextStyle(
                  //ntSize: 10.0,
                  fontFamily: 'Baukasten'),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Text('hello'),
                Text('hello'),
                Text('hello'),
                Text('hello')
              ],
            ),
          ),
          //Container(height: 45, color: kOnyx,),
        ],
      ),
    );
  }
}

OUTPUT:

Note, I used different colors as I could not get your exact colors:

I am having problems with the line ```_tabController = TabController(length: 4, vsync: this);``` specifically with the ```vsync: this``` it is causing errors. removing it induces more errors. but this solution seems close. — vixplays, Jul 30 '20 at 06:17
I updated my answer, the class didn't have any `mixin` attached to it. @victor — void, Jul 30 '20 at 06:19

TabView expand to bottom of the page

1 Answers1