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.
Top comments (1)
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...