Make a part of the screen scrollable in Flutter

Question

I want to only make a part of my screen scrollable. When the number of items in my ListView exceeds 4 or 5 I am unable to place any widgets below this list view. I am not sure if there is a way to wrap all the contents of the listview to make that scrollable.

  ListView(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    children: _getListings(businessListing),
  ),

This is my ListView and this is how the UI looks

The problem is when the number of RadioTile exceeds 8; the textField and the Button are pushed out of the screen. I am wondering if it is good to make the entire screen scrollable? Or make only a part of the screen containing the RadioTiles Scrollable?

Thanks,

Ruckus

Answer 1

There are a couple of points to consider:

1. If you plan to have more fields below the RadioTiles along with the Google Listing URL and the Save button, then it might be a good option to keep the entire screen scrollable.

2. On the other hand, if it's going to be just the two things below the RadioTiles, then it would be better to keep only the RadioTile list to be scrollable. This way the TextField and the Save button will always be accessible to the user without the need to scroll.

3. Also, you can decide about the scrolling depending on the priority of the fields. If the TextField and Save button have more priority then it would be best if they are always visible on the screen.

To make only a part of the screen scrollable, you can wrap the ListView in a Container with some fixed height, so that the it will scroll only within those bounds.

You will also need to change the physics property to AlwaysScrollableScrollPhysics().

Example -

Container(
  height: 300.0 //Your custom height
  child: ListView(
    shrinkWrap: true,
    physics: AlwaysScrollableScrollPhysics(),
    children: _getListings(businessListing),
  ),
)

Thorma

how to do this if the height of the container is a variable / changing? – Coons

we can warp it up with Exapnded widget that will work fine we dont need to say about height. – Celloidin

Answer 2

To complete thebuggycoder answer if you want to keep only a part of your screen scrollable but keep variable height bottom elements, you can embed your ListView inside the Expanded of a Column, as shown below:

Column(
    children: [
      Expanded(
        child: ListView(
           children: _getListings(businessListing),
        ),
      ),
      Container(
        child: Text('This element must stay at the bottom'),
      ),
    ],
  );

What are you doing there is basically telling your Column that it has 2 (or more) elements where each element usually takes the space it needs, except elements that are Expanded elements and will take "the maximum space left" in the Column.

Umberto

Nice solution - this is exactly what I was looking for! – Garage

awesome answer :-) – Martinsen