Reputation: 11634

Flutter - How to make a column screen scrollable

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 !!

Upvotes: 132

Answers (6)

Rob Lyndon

Reputation: 12691

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>[
        Child1(),
        Child2(),
        ...
        ChildN()
      ]
    )
  )
);

Upvotes: 170

Tigran Muradyan

Reputation: 123

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: [
                ...,
                ...
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

Upvotes: 8

Pankajan05

Reputation: 177

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

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

Upvotes: 11

Sheraz Hussain Turi

Reputation: 47

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'),
        ],
    ),
)

Upvotes: 3

CopsOnRoad

Reputation: 268494

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'),
  ],
)

Upvotes: 94

anmol.majhail

Reputation: 51326

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)),
                      ),
                    )),
              ],
            ),
          ),
        );
      }
    }

Upvotes: 100

Flutter - How to make a column screen scrollable

Answers (6)

Related Questions