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 — Sher Ali, 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 150 · Answer 1 · answered Jul 17 '19 at 00:10

150

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

12,089
5
49
74

12

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 96 · 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 84 · Answer 3 · answered May 01 '20 at 11:08

84

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

237,138
77
654
440

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
This is the best answer. If you have nested columns or nested ListView, defining the height of the inner Column/ListView is essential to have multiple scrolls. If you don't have a fixed size, instead of SizedBox, you can use Expanded – Pablo Insua Jul 11 '22 at 14:43

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

11

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

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

answered Dec 30 '20 at 06:24

Pankajan05

166
1
9

5

The main thing here is not the Expanded but the scroll view. – Csaba Toth Jun 25 '22 at 01:03

score 2 · Answer 5 · 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'),
        ],
    ),
)

Tigran Muradyan · Answer 6 · 2023-04-10T07:04:01.810

If you have nested columns, go with the solution using

Expanded -> SingleChildScrollView -> Column

Here is the solution:

OnboardingScaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Center(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ...,
                ...
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

Flutter - How to make a column screen scrollable

6 Answers6

Linked

Related