Press "Enter" to skip to content

5 Ways to Make Scrollable Screen in Flutter

If your content on a screen is excess the size of the flutter app screen then you will get an error like ‘BOTTOM OVERFLOWED BY 240 PIXELS‘.

Flutter BOTTOM OVERFLOWED BY 240 PIXELS error

So you need to make the screen scrollable which scrolls the screen depending on the contents length.

Let’s discuss 5 important ways to make a screen scrollable.

1. SingleChildScrollView

This is the simplest method to make a scrolling screen. Just put the content as a child of the this SingleChildScrollView widget.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Scrolling Screen';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: BuildBody(),
      ),
    );
  }
}
class BuildBody extends StatefulWidget {
  @override
  _BuildBodyState createState() => _BuildBodyState();
}

class _BuildBodyState extends State<BuildBody> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SingleChildScrollView(
          child: Column(
          children: <Widget>[

            Container(
              height: 200,
              width: 300,
              color: Colors.blue,
              child: Text("hello"),
            ),
            Container(
              height: 200,
              width: 300,
              color: Colors.green,
              child: Text("hello"),
            ),
            Container(
              height: 200,
              width: 300,
              color: Colors.yellow,
              child: Text("hello"),
            ),
            Container(
              height: 200,
              width: 300,
              color: Colors.red,
              child: Text("hello"),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Flutter Single Child Scroll View output

Not that, this widget supports only one child. So if you need more widgets scrollable, then just make a container or column or any other widget as the main child and put rest of all inside the container.

2. List View

This is the next simple method to make a scrolling screen.

In List View, you can add any widget as the children of List View. ‘ListTile’ is the main widget inside the list view for creating default list item.

Example:

Widget build(BuildContext context) {
return ListView(
         padding: EdgeInsets.all(5),
         children: <Widget>[
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[200],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[300],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[400],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[500],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[600],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[700],
            child: Text("hello"),
          ),
          Divider(),
          Container(
            height: 100,
            padding: const EdgeInsets.all(8),
            color: Colors.teal[800],
            child: Text("hello"),
          ),
        ],
    );
}

Where ‘Divider()’ used for create a divider lines between lists.

Output:

Flutter List view scrolling screen output

3. Grid View:

You can use this scrolling widget for grid types of contents like gallery.

Example:

Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(10),
      crossAxisSpacing: 8,
      mainAxisSpacing: 8,
      crossAxisCount: 2,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[200],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[300],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[400],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[500],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[600],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[700],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[800],
            child: Text("hello"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.blue[900],
            child: Text("hello"),
          ),
        ],
    );
  }

Output:

Flutter Grid view scrolling screen

If you want a single grid on a line, then set crossAxisCount as 1.

4. CustomScrollView

In this widget, you can customize the scrolling contents with many of its properties.

You can make scrolling screen like this:

Flutter custom scroll view example output

Example

 CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          pinned: true,
          expandedHeight: 150,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Item Title'),
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 250.0,
            mainAxisSpacing: 8.0,
            crossAxisSpacing: 8.0,
            childAspectRatio: 4.0,
          ),
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.blue[100 * (index % 10)],
                child: Text('Grid Item $index'),
              );
            },
            childCount: 10,
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.red[100 * (index % 10)],
                child: Text('List Item $index'),
              );
            },
            childCount: 10,
          ),
        ),
      ],
    );

5. PageView

Here, instead of scrolling contents on the screen, pageView widget scroll screen by screen.

You can read more here

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *