How to constrain ListView in Flutter based on viewport height

listview flutter scroll constraints flutter-layout

2,531

For the whole screen scroll when data is exceed from the device height then you need to use the SingleChildScrollView widget which scrolls when data is exceed from the device height. I have created the example of it in which i have used the MediaQuery for the proper size of the widget .Please check the below solution and let me know in case of concern.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return _buildPage();
  }

  Widget _buildPage() {
    return SafeArea(
      top: true,
      child: Scaffold(
        body: SingleChildScrollView (

            child: ConstrainedBox(
              constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(top: 20.0),
                    height: MediaQuery
                        .of(context)
                        .size
                        .height * 0.2,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("Ravindra Kushwaha", style: TextStyle(
                          fontSize: 20.0
                      ),),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(4.0),
                    child: TextField(

                    ),
                  ),

                  Expanded(
                    child: _buildList(),
                  ),
                ],
              ),
            )
        ),
      ),
    );
  }

  Widget _buildList() {
    return ListView(
      children: <Widget>[
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('First'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('Seond'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('Third'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
      ],
    );
  }
}

And Output will be following.

2,531

Author by

MDompekidis

Updated on December 21, 2022

Comments

MDompekidis over 1 year
I'm trying to limit a ListView based on viewport height so that it scrolls if more items exist in it, but I haven't found a way to successfully do that without providing a fixed number on a SizedBox.

Layout looks like this:
```
- SingleChildScrollView
       - SizedBox (height equal to MediaQuery.of(context).size.height)
               - Column
                   - Text
                     - TextField
                         - SizedBox (because I found no other way)
                              - ListView
```
Something to note here is that I don't want the List to scroll along the the rest of the view but on its own leaving textfield always in view.
- Ravindra Kushwaha almost 4 years
  
  What problem are you getting now
- pskink almost 4 years
  
  why not Column[Text, TextField, Expanded > ListView]?
- MDompekidis almost 4 years
  
  Without a Scroll container when the keyboard opens I get the overflow error.
- Ravindra Kushwaha almost 4 years
  
  Check the below solution I which I have texfield when keyboard appear there will not appear the error at the bottom
MDompekidis almost 4 years

It is much better however in order to see the last entry of the list I need to also scroll the whole view, so it is more like double scroll now.
Ravindra Kushwaha almost 4 years

You can remove the singlescollview to avoid the whole screen screen instead of the listview scroll