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

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:

Solution 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

Solution 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();
          }
        });

Comments

[Maverick]

did it sort out for you?

[Richardd]

I used a PageView instead.