Widgets in tabbarview take extra bottom spacing.How to justify their heights according to content?

Question

I'm having two tabs in my tabbar and card widget which makes up both of tabbarviews. I am using Slivers in this case.CustomScrollView is my parent widget. I am displaying Texts in these views but they take extra empty spacing from bottom which I want to get rid of.If these widgets are placed outside tabbarview they work fine and justify height according to their content.The last widget I've added outside of tabbarview and as you can see it works fine.

Here is my code:

import 'package:flutter/material.dart';

class TabviewIssue extends StatefulWidget {
  @override
  _TabviewIssueState createState() => _TabviewIssueState();
}

class _TabviewIssueState extends State<TabviewIssue>with TickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    this._tabController = TabController(length: 2, vsync: this);

  }

  String htmlText = 'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(child: SizedBox(height: 50,)),
            SliverToBoxAdapter(
              child: Container(
                  color: Colors.grey.shade100,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: TabBar(
                      indicator: BoxDecoration(color: Colors.grey.shade400),
                      labelColor: Colors.white,
                      unselectedLabelColor: Colors.black,
                      indicatorColor: Colors.grey,
                      tabs: <Widget>[
                        Tab(
                            child: Text("Product Features",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                        Tab(
                            child: Text("Reviews",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                      ],
                      controller: this._tabController,
                    ),
                  )),
            ),
            SliverFillRemaining(
              child: TabBarView(
                  controller: _tabController,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                          color: Colors.grey.shade200,
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(children: <Widget>[
                              Text("Features",
                                  style: TextStyle(
                                      fontSize: 17, fontWeight: FontWeight.bold)),
                              Text( htmlText),
                            ]),
                          )),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                          color: Colors.grey.shade200,
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(children: <Widget>[
                              Text("Features",
                                  style: TextStyle(
                                      fontSize: 17, fontWeight: FontWeight.bold)),
                              Text( htmlText),
                            ]),
                          )),
                    ),

                  ]),
            ),

            SliverToBoxAdapter(
              child:   Padding(
                padding: const EdgeInsets.all(8.0),
                child: Card(
                    color: Colors.grey.shade200,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(children: <Widget>[
                        Text("Features",
                            style: TextStyle(
                                fontSize: 17, fontWeight: FontWeight.bold)),
                        Text( htmlText),
                      ]),
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}

E.Benedos · Answer 1 · 2020-04-25T13:46:26.647

class TabviewIssue extends StatefulWidget {
  @override
  _TabviewIssueState createState() => _TabviewIssueState();
}

class _TabviewIssueState extends State<TabviewIssue>
    with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    this._tabController = TabController(length: 2, vsync: this);
  }

  String htmlText =
      'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
                child: SizedBox(
              height: 50,
            )),
            SliverToBoxAdapter(
              child: Container(
                  color: Colors.grey.shade100,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: TabBar(
                      indicator: BoxDecoration(color: Colors.grey.shade400),
                      labelColor: Colors.white,
                      unselectedLabelColor: Colors.black,
                      indicatorColor: Colors.grey,
                      tabs: <Widget>[
                        Tab(
                            child: Text("Product Features",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                        Tab(
                            child: Text("Reviews",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                      ],
                      controller: this._tabController,
                    ),
                  )),
            ),
            SliverFillRemaining(
              child: TabBarView(controller: _tabController, children: <Widget>[
                //TAB 1
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    ListView(
                      shrinkWrap: true,
                      children: <Widget>[
                        Card(
                            color: Colors.grey.shade200,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(children: <Widget>[
                                Text("Features",
                                    style: TextStyle(
                                        fontSize: 17,
                                        fontWeight: FontWeight.bold)),
                                Text(htmlText),
                              ]),
                            )),
                        Card(
                            color: Colors.grey.shade200,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(children: <Widget>[
                                Text("Features",
                                    style: TextStyle(
                                        fontSize: 17,
                                        fontWeight: FontWeight.bold)),
                                Text(htmlText + htmlText),
                              ]),
                            )),
                      ],
                    ),
                    Expanded(
                      child: Container(
                        child: Text('All remaining space'),
                        color: Colors.red,
                      ),
                    )
                  ],
                ),
                //TAB 2
                ListView(
                  children: <Widget>[
                    Card(
                        color: Colors.grey.shade200,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(children: <Widget>[
                            Text("Features",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.bold)),
                            Text(htmlText),
                          ]),
                        )),
                    Card(
                        color: Colors.grey.shade200,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(children: <Widget>[
                            Text("Features",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.bold)),
                            Text(htmlText + htmlText),
                          ]),
                        )),
                  ],
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

Where is TabbarView ? Problem is I want content in tabbarview justified according to it's size. — Haroon Ashraf Awan, Apr 25 '20 at 13:03
I've edited the code. Please retry it, I was only missing the TabBar functionality — E.Benedos, Apr 25 '20 at 13:15
Thank you Benedos for looking into this.Card is indeed justified according to its height but tabbarview is still taking extra spacing from bottom.Actually I want to place some widget below tabbarview in my ui design but the tabbarview takes a lot of space.I thought if card is justified according to it's size maybe tabbarview will not take extra spacing from bottom but this doesn't seem to be working.When I place some widget below tabbarview widget it has a lot of gap of spacing because of tabbarview height. — Haroon Ashraf Awan, Apr 25 '20 at 13:32
I'm not sure I've understand what are you looking for. Why you cannot simply add other widget to ListView? Anyway I've newly changed my code in order to satisfy your request — E.Benedos, Apr 25 '20 at 13:46

Widgets in tabbarview take extra bottom spacing.How to justify their heights according to content?

1 Answers1