How to Add Scroll In Flutter Application?

Consider a case where users get lots of data on the screen, and the size of data received is not fixed, so it may occur that after getting some amount of data user may get an overflow error. So if we can scroll the page, then whenever users reach the bottom of the page, new data gets loaded. So in this article, we are going to learn How to Scroll Page In Flutter?

How to Add Scroll Page In Flutter? User cam wraps your widget tree inside a SingleChildScrollView like below:

body: SingleChildScrollView(
child: Stack(
    children: <Widget>[
      new Container(
        decoration: BoxDecoration(
            image: DecorationImage(...),
      new Column(children: [
        new Container(...),
        new Container(...... ),
        new Padding(
          child: SizedBox(
            child: RaisedButton(..),
        ),
....
...
 );

We will use a LayoutBuilder widget and receive the output we want to. Then, fold the SingleChildScrollView widget with LayoutBuilder Widget and call the Builder function. We will use the LayoutBuilder Widget to earn the box contains or the quantity of available space.

new LayoutBuilder(
        builder:
            (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints:
                  BoxConstraints(minHeight: viewportConstraints.maxHeight),
              child: Column(children: [
             // remaining stuffs
              ]),
            ),
          );
        },
      )

Using ListView: Listview Widget also offers you scrolling Facilities. So, you don’t need to be stressed about adding an extra widget.

ListView(
        children: [
          Container(..),
          SizedBox(..),
          Container(...),
          Text(..)
        ],
    ),

You will also receive the same result using the CustomScrollView widget. Put your CustomScrollView widget inside the Column Widget.

return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
      body: Container(
          constraints: const BoxConstraints.expand(),
          child: Column(
            children: <Widget>[
              Expanded(
                child: CustomScrollView(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: false,
                  slivers: <Widget>[
                    SliverPadding(
                      padding: const EdgeInsets.symmetric(vertical: 0.0),
                      sliver: SliverList(
                        delegate: SliverChildListDelegate([
                          for (var i = 1; i <= 100; i++)
                            ListTile(
                              title: Text(i.toString()),
                            )
                        ]),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          )),
    );

Output:

Conclusion: In this article, We have been through How to Scroll Page In Flutter?

Thank you for reading. Hope you enjoyed reading and got some value from our article. Feel free to ask your queries. We are always trying to proved you a best content.

Looking for reliable Flutter app development services? Hire the Flutter app developers from Flutter Agency your next project. Get a free consultation today!

Keep Fluttering!!! Keep Learning!!!