CODEWITHSUNDEEP
flutterdart
darkstar
darkstar

Reputation: 988

How to stop listview from overflowing inside a column?

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!

Upvotes: 0

Views: 1565

Answers (1)

Jahidul Islam
Jahidul Islam

Reputation: 12575

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

Upvotes: 1

Related Questions