roller_list

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

RollerList is a Flutter widget that mimics the behavior of physical rollers, allowing endless scrolling through a finite set of items. It's ideal for creating engaging, interactive interfaces like prize wheels or number spinners. The widget smoothly animates item transitions and supports custom styling and event callbacks. Designed for cross-platform use, it runs seamlessly on Android, iOS, Web, macOS, Windows, and Linux. Perfect for gamified experiences and reward systems.

Use cases

Gamified user interfaces
Prize wheel implementations
Number or item spinners
Interactive rewards systems
Digital slot machines
Animated selection pickers

Key features

Endless scrolling with limited items
Smooth animation transitions
Cross-platform compatibility
Customizable item appearance
Event callbacks for selection
Supports multiple platforms

Suitable for

Game developers
Reward app creators
Interactive UI designers
Flutter beginners exploring animations
Apps needing engaging selection mechanics

Considerations

Best suited for small to medium item sets
May require performance tuning for large datasets
Limited to visual appeal over complex data handling
Not ideal for standard list navigation
Requires careful design for accessibility

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

roller_list package

This widget is a list of values distributed in a circle. The main rules of the list are: a user could scroll it in one direction endlessly, list values are limited and repeated in the same order over and over again. Possible usage scheme: -time selection -piano notes selection -choice of any limited number of items, where it is not important what should go first and what should go last.

Example

You can check Flutter for web build here Or see how it looks like on iphone:

How to use

In the dependencies: section of your pubspec.yaml, add the following line:

roller_list: <latest version>

Then import this class:

import 'package:roller_list/roller_list.dart';

And add your list like this (with only programmatical scroll):

RollerList(
 items: slots,
 enabled: false,
 key: leftRoller,
)

Or like this (with enabled scroll):

RollerList(
  items: months,
  onSelectedIndexChanged: _changeMonths,
  initialIndex: 1,
)

where months is a list of widgets:

static const MONTHS = {
    "January": 31,
    "February": 29,
    "March": 31,
    "April": 30,
    "May": 31,
    "June": 30,
    "July": 31,
    "August": 31,
    "September": 30,
    "October": 31,
    "November": 30,
    "December": 31
  };

final List<Widget> months = MONTHS.keys
  .map((month) => Padding(
        padding: EdgeInsets.all(12.0),
        child: Text(
          month,
          textScaleFactor: 1.3,
          textAlign: TextAlign.center,
        ),
      ))
  .toList();

and _changeMonths will show the selection result somewhere in the widget tree:

void _changeMonths(int value) {
    setState(() {
      selectedMonth = MONTHS.keys.toList()[value];
    });
}

Search packages, repositories and app categories

Install package