Flutter - How to make a column screen scrollable

Question

I'm building a flutter app with a Login Screen. On focus on the text field(s), the screen is overflowed and i cannot scroll. I've tried using a ListView.builder, but that just gives a renderBox error, and the regular ListView doesn't work

The widget structure is like this

-scafold
   - body
     - container
       - column    
           - form
              - column
                  - textInput
                  - textInput
                  - container    
           - container
              - row      
           - raisedButton

Thank You in advance !!

use this reference https://stackoverflow.com/questions/51997936/flutter-listview-overflow/51998850#51998850 — Zulfiqar, Aug 28 '18 at 09:48
I replaced the first column with a ListView and it worked. If you prefer using Listview, please add the example with listview and paste the error here. otherwise, use @Zulfiqar 's way — Yamin, Aug 28 '18 at 09:51

score 124 · Answer 1 · answered Jul 17 '19 at 00:10

124

The ListView solution should work, but at the time of writing, it suffers from the crash listed here. Another way to achieve the same thing without this crash is to use a SingleChildScrollView:

return new Container(
  child: new SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

answered Jul 17 '19 at 00:10

Rob Lyndon

11,389
4
44
66

10

This method did not work for me when the column I wanted to scroll was nested inside another column. It worked for scrolling the outermost column. – Cherif Diallo Dec 23 '19 at 22:05
Only the first child in widget tree makes the column scroll vertically. I want to make make the entire items scrolls – Aditya A.Rajan Apr 01 '20 at 17:32
1

I you encounter few error try adding ``` mainAxisSize: MainAxisSize.min ``` to your ```Column``` widget. Also if the child widget is ```ListView.builde``` add ```shrinkWrap: true``` – Panagiss Dec 14 '20 at 10:58

score 88 · Accepted Answer · answered Aug 28 '18 at 10:57

try this Code: Its Using ListView

    class Home extends StatelessWidget {
  @override
     Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          body: Center(
            child: ListView(
              shrinkWrap: true,
              padding: EdgeInsets.all(15.0),
              children: <Widget>[
                Center(
                  child: Card(
                    elevation: 8.0,
                    child: Container(
                      padding: EdgeInsets.all(10.0),
                      child: Column(
                        children: <Widget>[
                          TextField(
                            decoration: InputDecoration(
                              prefixIcon: Icon(Icons.person),
                              labelText: "Username or Email",
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          TextField(
                            decoration: InputDecoration(
                              prefixIcon: Icon(Icons.lock),
                              labelText: "Password",
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          Material(
                            borderRadius: BorderRadius.circular(30.0),
                            //elevation: 5.0,
                            child: MaterialButton(
                              onPressed: () => {},
                              minWidth: 150.0,
                              height: 50.0,
                              color: Color(0xFF179CDF),
                              child: Text(
                                "LOGIN",
                                style: TextStyle(
                                  fontSize: 16.0,
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 25.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(child: Text("Don't Have a Account?")),
                    Text("Sign Up",
                        style: TextStyle(
                          color: Colors.blue,
                        )),
                  ],
                ),
              ],
            ),
          ),
          bottomNavigationBar: Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    child: RaisedButton(
                      padding: EdgeInsets.all(15.0),
                      onPressed: () {},
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(
                            32.0,
                          ),
                          side: BorderSide(color: Color(0xFF179CDF))),
                      child: Text(
                        "SKIP SIGN UP FOR NOW",
                        style:
                        TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
                      ),
                    )),
              ],
            ),
          ),
        );
      }
    }

`shrinkWrap: true` is the only thing important in this exhaustive answer — Jérémy, Nov 29 '21 at 19:24

score 61 · Answer 3 · answered May 01 '20 at 11:08

61

There are two easy ways of doing it.

Wrap your Column in a SingleChildScrollView

SingleChildScrollView(
  child: Column(
    children: [
      Text('First'),
      //... other children
      Text('Last'),
    ],
  ),
)

Use ListView instead of Column.
```
ListView(
  children: [
    Text('First'),
    //... other children
    Text('Last'),
  ],
)
```
This approach is simple to use, but you lose features like crossAxisAlignment and other benefits provided by Column, in that case, you can wrap your children widget inside Align and set alignment property.

Now you may have nested children which are further scrollable, in that case, you need to provide a fixed height to your children, you may use SizedBox for that, that's it.

For example:

ListView(
  children: [
    Text('First'),
    SizedBox(
      height: 100,
      child: ListView(...), // nested ScrollView
    ),
    Text('Last'),
  ],
)

answered May 01 '20 at 11:08

CopsOnRoad

175,842
51
533
380

4

Most complete and easiest to follow answer for me. – DaReal Jul 20 '20 at 17:24
1

Using a `SingleChildScrollView` should be the accepted and standard way of achieving this. – Zalán Meggyesi Jul 28 '20 at 03:54
thanks for sharing this info. Could you tell the which one is recommended? – Aravin Aug 29 '20 at 10:13
1

@Aravin Well it depends on your use case, if there aren't enough items and you want some properties of `Column` then go for it, otherwise `ListView` is better. – CopsOnRoad Aug 29 '20 at 13:20

Paresh Mangukiya · Answer 4 · 2021-02-04T03:19:59.497

The column is used when we have to list widgets vertically on the screen and SingleChildScrollView widget provides scroll functionality for Column widgets.

When we used SingleChildScrollView+Column, the entire item list is rendered even if only a few items are visible.

So for complex layouts with a small number of items, the performance gain may not be worth the trouble, in which case we can use SingleChildScrollView.

Using SingleChildScrollView with Columns make your screen scrollable, and you can make your layout as above

Few Advantages:

It will be useful when different widgets are needed with scroll functionality.
For complex layouts, when items are less & performance, not a concern we can use it(Like when every other widget required some modification which is different from other)

Here is how can you do it

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          bottom: false,
          child: Container(
            padding: EdgeInsets.only(left: 15, right: 15),
            height: double.infinity,
            width: double.infinity,
            child: SingleChildScrollView(
                padding: EdgeInsets.only(bottom: 15),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 200.0,
                    ),
                    Card(
                      elevation: 8.0,
                      child: Container(
                        padding: EdgeInsets.all(10.0),
                        child: Column(
                          children: <Widget>[
                            TextField(
                              decoration: InputDecoration(
                                prefixIcon: Icon(Icons.person),
                                labelText: "Username or Email",
                              ),
                            ),
                            SizedBox(
                              height: 15.0,
                            ),
                            TextField(
                              decoration: InputDecoration(
                                prefixIcon: Icon(Icons.lock),
                                labelText: "Password",
                              ),
                            ),
                            SizedBox(
                              height: 30.0,
                            ),
                            MaterialButton(
                                height: 50.0,
                                elevation: 5,
                                minWidth: 300,
                                onPressed: () {},
                                shape: RoundedRectangleBorder(
                                  borderRadius: new BorderRadius.circular(30.0),
                                ),
                                color: Theme.of(context).primaryColor,
                                disabledColor: Theme.of(context)
                                    .primaryColor
                                    .withOpacity(0.50),
                                disabledElevation: 0,
                                child: Text('SIGN IN',
                                    textAlign: TextAlign.center, style: TextStyle(color: Colors.white),))
                          ],
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 25.0,
                    ),
                    Row(
                      children: <Widget>[
                        Expanded(child: Text("Don't Have a Account?")),
                        Text("Sign Up",
                            style: TextStyle(
                              color: Colors.blue,
                            )),
                      ],
                    ),
                    SizedBox(
                      height: 50.0,
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
                        Text(
                          'New to App?',
                          style: TextStyle(color: Colors.black87),
                        ),
                        SizedBox(
                          width: 5,
                        ),
                        GestureDetector(
                          onTap: () {
                          },
                          child: Text(
                            "REGISTER", style: TextStyle(
                            color: Colors.blue,
                          )
                          ),
                        ),
                      ]),
                    )
                  ],
                )),
          ),
        ));
  }
}

You're a full photocopy machine dude, this time you copied [this](https://stackoverflow.com/a/61541293/12483095) answer. I've seen almost 95% of your answers copied from others. — iDecode, Feb 02 '21 at 15:29
Yes, I agree but I have tried to expand with the UI that has been asked question. — Paresh Mangukiya, Feb 05 '21 at 02:50

score 5 · Answer 5 · answered Dec 30 '20 at 06:24

We can use the Expanded widget. It will add scrolling.

return new Expanded(
  child: new SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

score 1 · Answer 6 · answered Sep 11 '20 at 08:06

Wrap your column in SingleChildScrollView and then wrap SingleChildScrollView in a Center widget to center the widgets in the column.

Center(
    child: SingleChildScrollView(
        child: Column(
        children: [
            Text('First'),
            //... other children
            Text('Last'),
        ],
    ),
)

Flutter - How to make a column screen scrollable

6 Answers6

Linked

Related