Flutter - How to make a column screen scrollable Flutter - How to make a column screen scrollable dart dart

Flutter - How to make a column screen scrollable


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()      ]    )  ));


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


There are two easy ways of doing it.

  1. Wrap your Column in a SingleChildScrollView

    SingleChildScrollView(  child: Column(    children: [      Text('First'),      //... other children      Text('Last'),    ],  ),)
  2. 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'),  ],)