How to Make a Column Screen Scrollable in Flutter : Various Methods

Flutter Column widget allows you to create as many widgets as children of it. All the widgets inside the columns widgets are aligned vertically. In this example, you will know how to make a column Screen Scrollable in flutter using various methods.

Method 1 : Use column inside the SingleChildScrollView

The first method I will tell you is to wrap all the children of the flutter column with SingleChildScrollView() widget. The SingleChildScrollView Widget acts as a box that allows you to scroll a single widget.

In my example, I have three containers that act as children of the column. And the column is the child of the SingleChildScrollView widget.

Execute the below lines of code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.red,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.amber,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.red,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.amber,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    color: Colors.blue,
                  )
                ],
              ),
            ),
          )),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

Method 2: Replace Column with ListView

The other method to make a column scrollable is the use of ListView instead of the Column widget. ListView is a scrollable list of widgets arranged linearly and displays all its children one after another in the vertical or horizontal direction.

Execute the below lines of code to create a Column Scrollable.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: ListView(
              children: [
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.red,
                ),
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.amber,
                ),
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.blue,
                ),
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.red,
                ),
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.amber,
                ),
                Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.blue,
                )
              ],
            ),
          )),
    );
  }
}

void main() {
  runApp(MyApp());
}

Output

Conclusion

These are the method that allows you to make any column scrollable in a flutter. The first method is using the flutter column widget but the second method is using the Flutter Listview. The second one allows you to make children vertically as well as horizontally scrollable.

I hope that this tutorial has cleared your queries. If you have any doubt then you can contact us for more help.