Description:
tiktoklikescroller
tiktoklikescroller #
A vertical fullscreen scroll implementation that snaps in place, similar to the TikTok app.
Demo #
Usage #
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.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'}}");
}
}
copied to clipboard
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Customer Reviews
There are no reviews.
