auto_scroll_row 0.1.0

A Flutter widget that automatically and smoothly scrolls a row of items horizontally — marquees, tickers and content sliders.

AutoScrollRow

AutoScrollRow is a Flutter widget that allows automatic scrolling of a row of widgets horizontally with customizable options. It is useful for creating marquees or content sliders with smooth animation control.

Features

• Automatically scrolls a row of widgets horizontally.
• Customizable speed via velocity (logical pixels per second).
• Option to reverse scroll direction (reverse).
• User interaction control (enableUserScroll): allow users to stop scrolling by dragging.
• Builder and separated constructors — lazily rendered, efficient for large lists.

Getting started

To use this package, add auto_scroll_row to your pubspec.yaml:

dependencies:
  auto_scroll_row: ^x.x.x

Run the following command:

flutter pub get

Usage

Standard Constructor

Here's a basic example of how to use the AutoScrollRow widget in your Flutter app:

AutoScrollRow(
 children: List.generate(
   10,
   (index) => Container(
     width: 100,
     height: 100,
     margin: const EdgeInsets.all(8),
     color: Colors.blueAccent,
     child: Center(child: Text('Item $index')),
   ),
 ),
 velocity: 60,  // pixels per second
 reverse: false,  // Set to true for right-to-left scroll
 enableUserScroll: true,  // Enable user to stop scroll by dragging
),

Builder Constructor

For large or dynamic lists, use the builder constructor — only the items in the viewport are rendered:

AutoScrollRow.builder(
  itemCount: 100,  // Specify the total number of items
  itemBuilder: (context, index) => Container(
    width: 100,
    height: 100,
    margin: const EdgeInsets.all(8),
    color: Colors.blue[(index * 100) % 900],
    child: Center(child: Text('Item $index')),
  ),
  velocity: 80,  // pixels per second
  reverse: true,  // Set to true for right-to-left scroll
  enableUserScroll: true,  // Enable user to stop scroll by dragging
),

Separated Constructor

When you need to place a widget between items (e.g., a divider or spacing), use the separated constructor:

AutoScrollRow.separated(
  itemCount: 100,  
  itemBuilder: (context, index) => Container(
    width: 100,
    height: 100,
    color: Colors.green,
    child: Center(child: Text('Item $index')),
  ),
  // Add a divider or spacing widget between items
  separatorBuilder: (context, index) => const SizedBox(width: 10),
  velocity: 80,
  reverse: false,
  enableUserScroll: true,
),

Additional information

Standard Constructor Parameters

• children: List of widgets displayed in the horizontal row.
• velocity: Scrolling speed in logical pixels per second. Defaults to 50; higher is faster.
• reverse: Set to true for right-to-left scrolling.
• enableUserScroll: Enable or disable user control over scrolling. Set to true to allow users to stop the scroll by dragging.

Builder Constructor Parameters

• itemBuilder: Function that builds widgets on demand as they become visible. Takes a BuildContext and index.
• itemCount: Total number of items in the list.
• velocity: Scrolling speed in logical pixels per second. Defaults to 50.
• reverse: Set to true for right-to-left scrolling.
• enableUserScroll: Enable or disable user control over scrolling.

Separated Constructor Parameters

• itemBuilder: Function that builds item widgets.
• separatorBuilder: Function that builds separator widgets between items.
• itemCount: Total number of items (separators will be one less than items).
• velocity, reverse, enableUserScroll: Same as above.

User Interaction

When enableUserScroll is set to true:

• Users can grab and scroll the content manually
• Auto-scrolling stops when the user starts dragging
• When the user releases, auto-scrolling continues from the current position

Support

If you find this plugin helpful, consider supporting me: