Swipe effect of tiktok : How to scroll vertically in full-screen? - flutter

Question

I'm trying to set up a gallery with a swipe effect similar to tiktok.
This is my initial screen:
When the user swipe the screen, the full-screen photo of the dog should appear like this:

Answer 1

Try tiktoklikescroller package
A vertical fullscreen scroll implementation that snaps in place, similar to the TikTok app.
Example :
import 'package:flutter/material.dart';
import 'package:tiktoklikescroller/tiktoklikescroller.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final List<Color> colors = <Color>[Colors.red, Colors.blue, Colors.yellow];
return MaterialApp(
home: Scaffold(
body: TikTokStyleFullPageScroller(
contentSize: colors.length,
swipeThreshold: 0.2,
// ^ the fraction of the screen needed to scroll
swipeVelocityThreshold: 2000,
// ^ the velocity threshold for smaller scrolls
animationDuration: const Duration(milliseconds: 300),
// ^ how long the animation will take
builder: (BuildContext context, int index) {
return Container(
color: colors[index],
child: Text(
'$index',
style: const TextStyle(fontSize: 48, color: Colors.white),
),
);
},
),
),
);
}
}
Output :
Hope it will be useful

Answer 2

Tiktoklikescroller used to but okay be as of September 2021, It works in the example, but would stop scrolling on element 1 with API data, (I don't know why).
So based on one of the comment, this worked for Senfuka (me):
PageView.builder(
scrollDirection: Axis.vertical,
itemCount: widget.products.length,
itemBuilder: (context, index) {
try {
return ProductPage(
widget.products[index],
isHome: false,
);
} catch (e) {
print(e);
return Container();
}
});

Answer 3

thanks for your suggestion. It´s almost working :)
I tried it, but I am getting an error: A RenderViewport expected a child of type RenderSliver but received a child of type RenderStack.
So according to documentation, it needs to be inside a Sliver. I tried put it inside the SliverPadding where I have the Header. And also tried to place it in an independent SliverToBoxAdapter.
But, I can only scroll the hole screen by dragging up the area of the Header. And then if I scroll down again, the Header and the AppBar never show again.
How can I scroll the hole screen and scroll it back?
SliverPadding(
padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
sliver: SliverToBoxAdapter(
child: Column(
children: [
Container(
height: 200.0,
color: Colors.black12,
child: Text('Header', style: TextStyle(fontSize: 30),),
),
Container(
height: MediaQuery.of(context).size.height,
child: TikTokStyleFullPageScroller(
contentSize: colors.length,
swipeThreshold: 0.2,
// ^ the fraction of the screen needed to scroll
swipeVelocityThreshold: 2000,
// ^ the velocity threshold for smaller scrolls
animationDuration: const Duration(milliseconds: 300),
// ^ how long the animation will take
builder: (BuildContext context, int index) {
return Container(
color: colors[index],
child: Text(
'$index',
style: const TextStyle(fontSize: 48, color: Colors.white),
),
);
},
),
),
],
),
),
),