Flutter ScrollView Easy Example

In flutter to enable vertical scrolling on screen, we will use SingleChildScrollView widget. SingleChildScrollView increases its height as per it's Child height. When we put Column widget as it's child than we will add multiple Children widget and scrolling functionality will be applied on all of them.

Flutter ScrollView Easy Example

1. Creating SingleChildScrollView widget and define Colum widget and put multiple Text, Container and Image widget inside it.

SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              width: double.infinity,
              height: 100.0,
            ),
            const Text('Text - 1', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.brown,
              width: double.infinity,
              height: 100.0,
            ),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            const Text('Text - 2', style: TextStyle(fontSize: 24)),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            Container(
              color: Colors.cyan, // Yellow
              height: 100.0,
              width: double.infinity,
            ),
            const Text('Text - 3', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.deepOrange, // Yellow
              height: 100.0,
              width: double.infinity,
            ),
          ],
        ),
      ),

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  final String testImage =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              width: double.infinity,
              height: 100.0,
            ),
            const Text('Text - 1', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.brown,
              width: double.infinity,
              height: 100.0,
            ),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            const Text('Text - 2', style: TextStyle(fontSize: 24)),
            Image.network(testImage,
                width: 300, height: 200, fit: BoxFit.contain),
            Container(
              color: Colors.cyan, // Yellow
              height: 100.0,
              width: double.infinity,
            ),
            const Text('Text - 3', style: TextStyle(fontSize: 24)),
            Container(
              color: Colors.deepOrange, // Yellow
              height: 100.0,
              width: double.infinity,
            ),
          ],
        ),
      ),
    );
  }
}