Scrollable View in Flutter

In this tutorial, you will learn how to make a Scrollable view in Flutter.

For a view to scroll, we will need to add enough information on a page, so that there is something to scroll up and down. I will do this with Flutter Container widgets. I will first put on a page a few container widgets until they do not fit, and the page needs to scroll to accommodate the information.

Let’s begin with creating a Column widget first.

Creating a Column Widget

In the below code snippet we are creating a function called cont() that accepts Color as an argument and it returns Container() widget with height: 200 pixels and width: 200 pixels. We will reuse this widget many times in the Column.

Widget cont(Color color){
    return Container(
      height:200,
      width:200,
      color:color,
    );
  }

Let’s now create a Column widget and add some containers to it. Notice how the array of children widgets is created in the below code example. Each child widget is created by calling a cont() function.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            cont(Colors.green),
            cont(Colors.blue),
            cont(Colors.orange),
            cont(Colors.redAccent),
          ],
        );

If you run this code snippet in your app, the column will look like in the image below.

At the bottom of the page, you will see an error showing an Overflow. This is because information does not fit on a page. To fix that we will need to use one of the Scrolling widgets in Flutter so that the content on the page can be scrolled. Let’s do that.

Adding a Scrolling Widget

There are different scrolling widgets in Flutter that we can use. In the code example below, I will use the SingleChildScrollView scrolling widget.

SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            cont(Colors.green),
            cont(Colors.blue),
            cont(Colors.orange),
            cont(Colors.redAccent),
          ],
        ),
      );

Now that we have wrapped the Column widget with a SingleChildScrollView scrolling widget, the information on the page should scroll and the error should go away.

Complete Code Example

Below is a complete code example for you to run and see how it works. It should create a very simple Flutter app with a few containers on a page. Run this code. Try scrolling the page up and down.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget cont(Color color) {
    return Container(
      height: 200,
      width: 200,
      color: color,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo Home Page"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              cont(Colors.green),
              cont(Colors.blue),
              cont(Colors.orange),
              cont(Colors.redAccent),
            ],
          ),
        ),
      ),
    );
  }
}

Note: If you use GridView.builder, Gridview.count or a ListView widget then these are already scrollable widgets and you don’t need to additionally use SingleChildScrollView.

I hope this Flutter tutorial is helpful to you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.

Happy learning!