How to Add Scroll Page in Flutter

In this example, we are going to show you how to add a scrolling page in Flutter. Scroll pages are required when you have overflow content so that users can scroll the overflown content on the screen. See the example below to add a scrolling page in Flutter.

SingleChildScrollView( 
    child:Column(
        children: [
            //your widgets here
        ]
    )
)

You can use SingleChildScrollView() to make a scrolling page in Flutter. Furthermore, you can change the default vertical scroll direction to horizontal.

SingleChildScrollView( 
   scrollDirection: Axis.horizontal
)

You can also show the scroll bar, you have to wrap the widget tree with Scrollbar() widget:

Scrollbar(
    child:SingleChildScrollView()
)

ListView( 
   children:[
      //your widgets here
   ]
)

You can make a scrolling page using ListView() widget as well. Furthermore, you can change the scroll direction to Horizontal.

ListView( 
   scrollDirection: Axis.horizontal,
)

You can also show the scroll bar using Scrollbar() widget:

Scrollbar(
    child:ListView()
)

View More details: How to Show Scrollbar on SingleChildScrollView and ListView in Flutter

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Scroll Page in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: ListView( 
            children: [
                    Container( 
                       color: Colors.deepPurpleAccent,
                       height: 200,
                    ),

                    Container( 
                       color: Colors.blue,
                       height: 200,
                    ),

                    Container( 
                       color: Colors.deepPurpleAccent,
                       height: 200,
                    ),

                    Container( 
                       color: Colors.blue,
                       height: 200,
                    ),

                    Container( 
                       color: Colors.deepPurpleAccent,
                       height: 200,
                    ),

                    Container( 
                       color: Colors.blue,
                       height: 200,
                    )
                    
                ],
          )
       );
  }
}