Flutter Scrollable layout using Single Child Scroll View 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 {
  @override
  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(
          'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
        ),
        new Container(
          padding:
              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:

Conclusion:

In this article, We have learned

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