CODEWITHSUNDEEP
flutterdartlistviewflutter-layout
Hundenberg
Hundenberg

Reputation: 47

Flutter: Container above ListView scrollable

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:

1

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

Upvotes: 1

Views: 1555

Answers (4)

Mohamed el nahrwy
Mohamed el nahrwy

Reputation: 1

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

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

Upvotes: 0

Mr.Paul
Mr.Paul

Reputation: 177

Add these lines in your listview

shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),

You can skip the Expanded widget for this solution.

Upvotes: 2

Hardik Mehta
Hardik Mehta

Reputation: 2425

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

Upvotes: 1

Masum Billah Sanjid
Masum Billah Sanjid

Reputation: 1189

Just removed SingleChildScrollView widget it will work.

Upvotes: 1

Related Questions