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

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

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

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),
                    ),
                  );
                },
              ),
            ),

          ],
        ),
      ),
    ),