DEV Community

loading...
Cover image for Full Page scroll views in flutter(TikTok effect)

Full Page scroll views in flutter(TikTok effect)

victor
Flutter Engineer
・1 min read

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.
instargram
So we are going to write code for a basic component app with a full-page scroll view on display.
image

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

PageController controller =PageController(initialPage: 0);
Enter fullscreen mode Exit fullscreen mode

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'),),
            ),

          ],
        ),
Enter fullscreen mode Exit fullscreen mode

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

Github

Discussion (1)

Collapse
pablonax profile image
Pablo Discobar

Helpful article! Thanks! If you are interested in this, you can also look at my article about Flutter templates. I made it easier for you and compared the free and paid Flutter templates. I'm sure you'll find something useful there, too. - dev.to/pablonax/free-vs-paid-flutt...