0

So basically I ListView.builder widget inside of a fixed container.

          Container(
            height: 500,
            child: TabBarView(
              children: [
                Container(
                  height: 500,
                  color: Colors.red,
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Center(child: Text("This is index $index"));
                    },
                  ),
                ),
                Center(child: Text("Second Tab")),
                Center(child: Text("Third Tab")),
              ],
            ),
          ),

Issue:

The issue with this widget is that since it is inside a container of a fixed height, the content of the list is cut off. I want the list to scroll along with the rest of the page so I don't want to remove the shrinkWrap nor NeverScrollableScrollPhysics(). I want it so that the list takes up as much room as it needs.

Things I've tried:

  1. Wrap the ListView with a Column: this causes the widget to overflow and when I add the SingleChildScrollView around that Column, it removes the functionality of the shrinkWrap and NeverScrollableScrollPhysics().
  2. Checked this answer. The parent widget is actually a CustomScrollView and this widget is inside of a SliverToBoxAdapter. That's why the container has a fixed size in the first place.

What can I do to get the ListView to take up as much room as it want? Thank you!

darkstar
  • 829
  • 11
  • 23
  • I am not sure if this is what you are looking for, but did you try out the `primary: false` inside the 'ListView'? The primary property makes the scrolling of the ListView stop and uses the scrolling from the parent. – immadisairaj Sep 23 '21 at 12:42
  • I just tried and it doesn't work unfortunately. Thanks though. – darkstar Sep 23 '21 at 19:43
  • If you want a Scrollable TabBarView, then I would recommend looking at https://stackoverflow.com/questions/53747149/how-to-create-a-bounded-scrollable-tabbarview. Probably changing your implementation a bit doesn't harm to make it look clean. – immadisairaj Sep 24 '21 at 05:59
  • 1
    I actually ended up using a separate style but thank you! I just tried the solution from that post and it did work for my original use case. Annoying I couldn't find it earlier haha. – darkstar Sep 25 '21 at 04:58

1 Answers1

1

Wrap your container with SingleChildScrollView and make scrollPhysics

SingleChildScrollView(
           Container(
                  height: 500,
                  color: Colors.red,
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Center(child: Text("This is index $index"));
                    },
                  ),
                ),
)
Jahidul Islam
  • 11,435
  • 3
  • 17
  • 38
  • In `TabBar` dynamic height doesn't work, I tried it. – Jahidul Islam Sep 23 '21 at 07:55
  • No when I do this, it removes the functionality of the ``shrinkWrap`` and ``NeverScrollableScrollPhysic()``. Basically I'm trying to get the instagram profile page functionality. Where everything scrolls together. – darkstar Sep 23 '21 at 07:59
  • you want to scroll your tabbar also, am I right? – Jahidul Islam Sep 23 '21 at 08:04
  • Yes make the children of the TabBarView scrollable. The problem is the fixed container but I have to keep it fixed because it is inside a SliverToBoxAdapter – darkstar Sep 23 '21 at 08:06