Flutter: Container above ListView scrollable

Question

I want to display a Container with Text followed by a ListView of categories. In my current code, it works out except that I wasn't able to figure out, how to make the Text and Container scrollable as well (so it moves upside away out of the frame).

It looks currently like this:

The blue container is static and stays at its location while the red ListView is perfectly fine scrollable.

Current Code:

      body: Container(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
          child: Align(
            alignment: Alignment.topLeft,
            child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
          ),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index){
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Category(),
              );
            }
          ),
        ),
      ],
    ),

I tried to implement this answer.

body: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 0, 30),
          child: Align(
            alignment: Alignment.topLeft,
            child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
          ),
        ),
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
              primary: false,
              itemCount: 20,
              itemBuilder: (context, index){
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Category(),
                );
              }
          ),
        ),
      ],
    ),
  ),

I get the following errors:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

RenderBox was not laid out: RenderFlex#12630 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Try wrapping your parent widget in Expanded() as I see you have already added shrinkWrap: true — gooner_psy, Jan 24 '22 at 06:55
Do you want the text to be scrollable like it's a child of the listview or make it go out of the view when scrolling? — Anan Saadi, Jan 24 '22 at 09:37

score 2 · Accepted Answer · edited Jan 24 '22 at 11:45

2

Add these lines in your listview

shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),

You can skip the Expanded widget for this solution.

edited Jan 24 '22 at 11:45

Nimantha

6,405
6
28
69

answered Jan 24 '22 at 07:01

Mr.Paul

142
1
8

score 1 · Answer 2 · answered Jan 24 '22 at 07:03

1

Just removed SingleChildScrollView widget it will work.

answered Jan 24 '22 at 07:03

Masum Billah Sanjid

1,029
1
7
19

It won't make the text scrollable. – Mr.Paul Jan 24 '22 at 07:04
I already tried. its work – Masum Billah Sanjid Jan 24 '22 at 07:05

score 1 · Answer 3 · answered Jan 24 '22 at 07:11

1

Wrap with SingleChildScrollView widget and then add physics : NeverScrollableScrollPhysics() to ListView widget.

answered Jan 24 '22 at 07:11

Hardik Mehta

2,195
1
11
14

Mohamed el nahrwy · Answer 4 · 2023-05-01T19:19:16.477

0

Simply by adding physics property to the ListView widget and determine it by BouncingScrollPhysics as follow:

ListView( physics: BouncingScrollPhysics(), children:[ Widget1, Widget2, ] )

edited May 01 '23 at 19:19

answered May 01 '23 at 19:14

Mohamed el nahrwy

1
1

Flutter: Container above ListView scrollable

4 Answers4