Flutter scrollable layout widget example

Flutter Scrollable layout using SingleChildScrollView Example

If you ever faced the issue of content going below the screen in your Android or iOS application.

If we talk about Android we use ScrollView, our parent element is ScrollView and anything which is under ScrollView becomes scrollable.

In iOS, we set content size of UiScrollView.

Using Flutter we have SingleChildScrollView Widget.

We will have Column widget in our example app.

Our Column will have 1 Image, 1 Heading Text and 1 Description text (which will be lengthy text).

If We don’t wrap everything (image, 2 text widgets) inside SingleChildScrollView we will get ‘BOTTOM OVERFLOWED BY XX PIXELS’ error in our Flutter app.

SingleChildScrollView Example Code

import 'package:flutter/material.dart';

class ScrollView extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Material(
        child: new Container(
            child: new SingleChildScrollView(
                child: new ConstrainedBox(
      constraints: new BoxConstraints(),
      child: new Column(children: <Widget>[
        new Image.network(
        new Container(
              EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0),
          color: Colors.grey,
          child: new Text(
            'Cast Light life style Here',
            textDirection: TextDirection.ltr,
            style: new TextStyle(
              fontSize: 40.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
        new Container(
          child: new Text(
            'Hi There ? this is sample plaid app using flutter sdk and dart programming language, devceloper is Hammad Tariq'
                'this is sample Flutter app example Code'
                'Flutter Column Widget scrollable using SingleChildScrollView'
                'I am just loving Flutter SDK'
                'Flutter scrollview example using Single Child Scroll View'
                'flutter fixing bottom overflow by xx pixels in flutter'
                'Flutter scrollable layout example'
                'Flutter app SingleChildScrollView Example ',
            textDirection: TextDirection.ltr,
            style: new TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.pink,

The output of above code:

Flutter Scrollable layout example code
Flutter ScrollView Example


In this article, We have learned

  • How to make layout scrollable in Flutter.
  • How to make child widgets inside Column Scrollable using SingleChildScrollView.


Hello! I am Hammad Tariq. Jack of All trades and Yet master of Many! Senior Android Application Developer | Cross-platform Development | Flutter | Backend Development (Spring Boot + Kotlin + MySQL) | Blogger | Founder I am an all-around Mobile Developer who is passionate about learning the latest technologies and trends. I graduated from Air University Islamabad, Pakistan in 2015 but started working on Android Development, Universal Windows Apps development long before that. Currently, I am working as a team lead and Senior Android Developer at EVAMP SAANGA, Pakistan.
Posts created 43

One thought on “Flutter Scrollable layout using SingleChildScrollView Example

Leave a Reply

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top