How to stop listview from overflowing inside a column?

Question

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:

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().
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!

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
– immadisairaj, Commented Sep 23, 2021 at 12:42
I just tried and it doesn't work unfortunately. Thanks though. — darkstar
– darkstar, Commented Sep 23, 2021 at 19:43
If you want a Scrollable TabBarView, then I would recommend looking at stackoverflow.com/questions/53747149/…. Probably changing your implementation a bit doesn't harm to make it look clean. — immadisairaj
– immadisairaj, Commented Sep 24, 2021 at 5:59
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
– darkstar, Commented Sep 25, 2021 at 4:58

Jahidul Islam · Accepted Answer · 2021-09-23 07:52:11Z

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"));
                    },
                  ),
                ),
)

answered Sep 23, 2021 at 7:52

Jahidul Islam

12.7k3 gold badges20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jahidul Islam Over a year ago

In TabBar dynamic height doesn't work, I tried it.

darkstar Over a year ago

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.

Jahidul Islam Over a year ago

you want to scroll your tabbar also, am I right?

darkstar Over a year ago

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

Collectives™ on Stack Overflow

How to stop listview from overflowing inside a column?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related