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

6 Answers

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.

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

ListView( children: [ Text('First'), //... other children Text('Last'), ], ) 

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

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

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

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

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

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobGtoZWiFdnyOn6OurKSav260zrBkraddoq6ssYyaZJynnKq6r3nSnKmenZ5iwKS%2BzqWjmpqcmg%3D%3D