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

Answer 1

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