Full Page scroll views in flutter(TikTok effect)

You must have seen that the Ui flow between "Tiktok" and Instagram reel are similar, both of them have the full-page scroll view effect based on user swipe.

So we are going to write code for a basic component app with a full-page scroll view on display.

Firstly we declare a page controller that would handle the state for our pageview widget.



PageController controller =PageController(initialPage: 0);

We declared the page view widget with a vertical scroll direction and created a list of pages which we would be scrolling through as children.



PageView(
          controller: controller,
          scrollDirection: Axis.vertical,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.blue,
              child: Center(child: Text('page 1'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.red,
              child: Center(child: Text('page 2'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.yellow,
              child: Center(child: Text('page 3'),),
            ),

          ],
        ),

That is all, this is a building block for an app like TikTok and Instagram where another component would be added on top.

Github

Blog

Full Page scroll views in flutter(TikTok effect)

victor

Join Our Newsletter. No Spam, Only the good stuff.

Related