Implement full-page scrolling in Flutter

Nausheen Siddiqui

20 December 2023

You probably already have noticed the UI flow similarity between TikTok and Instagram Reels. Both of these apps adapt a full page scroll based on user swipe-like flick gestures in UX. So, let’s check how can we implement full-page scrolling in Flutter.

This way of design gives the user a fully immersive app experience without any distractions. Let us see an example of the same full-page vertical scroll-based app experience in Flutter.

Read more about Flutter app development from Mobikul.

We will first declare a PageController that will control the state of the PageView widget. We also specify the index of the initially loaded page.

PageController _controller = PageController(initialPage: 0);

1	PageController _controller = PageController(initialPage: 0);

Define a list of pages to scroll through. Add a Container widget and specify height and width.

List<Widget> pages = [
      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.blue,
          child: Center(
            child: Text("Some text here"),
          )),
      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.red,
          child: Center(
            child: Text("Some text here"),
          )),
      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.yellow,
          child: Center(
            child: Text("Some text here"),
          ))
    ];

List<Widget> pages = [

Container(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

color: Colors.blue,

child: Center(

child: Text("Some text here"),

)),

Container(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

color: Colors.red,

child: Center(

child: Text("Some text here"),

)),

Container(

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

color: Colors.yellow,

child: Center(

child: Text("Some text here"),

))

];

Declare a PageView widget with a vertical scroll direction. We can also define physics, reverse, and clipBehaviour properties.

PageView(
        scrollDirection: Axis.vertical,
        controller: _controller,
        children: pages,
      ),

PageView(

scrollDirection: Axis.vertical,

controller: _controller,

children: pages,

Now our app is ready. Check out the output:

So, this is how we implement full-page scrolling in Flutter. You can add videos, images, or text according to your needs in the Container widget.

Thanks for reading this article.

If I got something wrong, let me know in the comments. I would love to improve.

Reference Link: https://dev.to/segun_codes/full-page-scroll-views-in-flutter-tiktok-effect-1pc4

You can also read: https://mobikul.com/reorderable-listview-in-flutter/