Updated 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.
|
1 |
PageController _controller = PageController(initialPage: 0); |
Define a list of pages to scroll through. Add a Container widget and specify height and width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
|
1 2 3 4 5 |
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/
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.