https://github.com/dmt195/tiktok-flutter-plugin

A Flutter package for fullscreen vertical scroll like TikTok
https://github.com/dmt195/tiktok-flutter-plugin

dart flutter flutter-package tiktok ui-components

Last synced: 17 days ago
JSON representation

A Flutter package for fullscreen vertical scroll like TikTok

• Host: GitHub
• URL: https://github.com/dmt195/tiktok-flutter-plugin
• Owner: dmt195
• License: apache-2.0
• Created: 2020-06-06T15:00:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-16T22:33:20.000Z (7 months ago)
• Last Synced: 2025-03-22T11:48:13.966Z (23 days ago)
• Topics: dart, flutter, flutter-package, tiktok, ui-components
• Language: Dart
• Homepage: https://pub.dev/packages/tiktoklikescroller
• Size: 235 KB
• Stars: 50
• Watchers: 3
• Forks: 20
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - tiktok-flutter-plugin

README

        
![Test](https://github.com/dmt195/tiktok-flutter-plugin/workflows/Test/badge.svg?branch=master)

[![codecov](https://codecov.io/gh/dmt195/tiktok-flutter-plugin/branch/master/graph/badge.svg?token=N93Q8FI6YJ)](https://codecov.io/gh/dmt195/tiktok-flutter-plugin)

# tiktoklikescroller

A vertical fullscreen scroll implementation that snaps in place, similar to the TikTok app.

## Demo

![Example at work](v0.1.0.gif)

## Usage

```dart

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 colors = [Colors.red, Colors.blue, Colors.green];

    final Controller controller = Controller()

      ...addListener((event) {

        _handleCallbackEvent(event.direction, event.success);

      });

    return MaterialApp(

      home: Scaffold(

        body: TikTokStyleFullPageScroller(

          contentSize: colors.length,

          swipePositionThreshold: 0.2,

          // ^ the fraction of the screen needed to scroll

          swipeVelocityThreshold: 2000,

          // ^ the velocity threshold for smaller scrolls

          animationDuration: const Duration(milliseconds: 400),

          // ^ how long the animation will take

          controller: controller,

          // ^ registering our own function to listen to page changes

          builder: (BuildContext context, int index) {

            return Container(

                color: colors[index],

                child: Text(

                  '$index',

                  style: const TextStyle(fontSize: 48, color: Colors.white),

                ),

              );

          },

        ),

      ),

    );

  }

  void _handleCallbackEvent(ScrollDirection direction, ScrollSuccess success,

      {int? currentIndex}) {

    print(

        "Scroll callback received with data: {direction: $direction, success: $success and index: ${currentIndex ?? 'not given'}}");

  }

}

```