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.
Wrap your
Column
in aSingleChildScrollView
SingleChildScrollView( child: Column( children: [ Text('First'), //... other children Text('Last'), ], ),)
Use
ListView
instead ofColumn
.ListView( children: [ Text('First'), //... other children Text('Last'), ],)
This approach is simple to use, but you lose features like
crossAxisAlignment
and other benefits provided byColumn
, in that case, you can wrap your children widget insideAlign
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'), ],)