Flutter – How to Make a Column Screen Scrollable

To implement this functionality and fix overflow issues, we wrap the Column widget with the SingleChildScrollView widget.

In the example below, we use the SingleChildScrollView widget and pass a Column widget which contains multiple TextField widgets.

class MyForm extends StatelessWidget {
 const MyForm({super.key});
 @override
 Widget build(BuildContext context) {
   return const SingleChildScrollView(
     padding: EdgeInsets.symmetric(horizontal: 16.0),
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 1'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 2'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 3'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 4'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 5'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 6'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 7'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 8'),
         ),
         SizedBox(height: 20),
         TextField(
           decoration: InputDecoration(labelText: 'Enter text 9'),
         ),
       ],
     ),
   );
 }
}

Output:-