CODEWITHSUNDEEP
fluttertabbardynamic-resizing
Alok
Alok

Reputation: 9008

TabBarView expanded till bottom irrespective of the start

I have been working on flutter, and now have to make the Tab Bar for the page. Since I've succeeded in making the tabs, but there is one thing which is not letting me complete my task which is this,

I have a design blueprint which is like this:

Column{
   mainAxisSize: MainAxisSize.max,
   crossAxisAlignment: CrossAxisAlignment.stretch,
   children: <widget>[
      Text("Hello World!"),
      Container(child: TabWidget())
   ]
}

I have not given any specific height to the container of the TabWidget() since I wanted the Tabs to take up the full height till the bottom.

TabWidget

child: TabBar(
   controller: _controller,
   tabs: [
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),    
    ]
    )
),
Container(
  //Deifining the height here, not deifing it will hide the content of the tabs
  height: MediaQuery.of(context).size.height/2.3,
  child: new TabBarView(
     controller: _controller,
     children: <Widget>[
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        ),
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        )  
      ]
    )
  )
  ]
);

Here is the catch, now I have tried my level best to get the result and hence did this :

  1. Use of Expanded() in the TabWidget to take up the height
  2. Use of double.infinity() in the height element of TabBarView
  3. I have read this answer : TabBarView without bounded height, but I don't want my screen to scrollable, Silver is not required in this case. Just the TabBarView should be expanded till the bottom irrespective of from where it is starting

I don't want to give a particular height to my TabBarView, instead, I want it to take the full height till the bottom irrespective of the screen, so my height is dynamic as per the screen.

I'd like to get some inputs on this so that I'd achieve my point. I'm using ListView() in the child of TabBarView, so even if the portion size is small of the screen of the phone user will still be able to scroll the content. But the height should be till bottom, doesn't matter what the screen's size. Thanks.

Any queries are welcome here.

Upvotes: 0

Views: 1889

Answers (1)

Keshava Muraari
Keshava Muraari

Reputation: 216

If you can calculate the height of other widgets in the screen above the tabBar then using MediaQuery.of(context).size.height you will get the height of the screen. Deduct the remaining height from the screen height and you can use the resulting value.

P.S. Be careful with the calculations and deduct every height value other than the tab including the safe area one that you will get from MediaQuery.of(context).padding.top & MediaQuery.of(context).padding.bottom.

Upvotes: 0

Related Questions