Scroll Mate

Multiple scroll controller works synchronization and define how many line to show

Preview

Scroll Mate

Getting Started

You can handle multiple scroll controller synchronization. All lines scrolls start and end at the same time. Decide how many lines do you want to show on the screen.

Properties

Scroll Mate Model

Parameter Type required default
items List<T> yes –
builder ScrollMateItem Function(T title, int index) yes –
lineCount int no 2
title Widget no SizedBox()
crossAxisAlignment CrossAxisAlignment no CrossAxisAlignment.start
crossAxisSpacing double no 10
mainAxisSpacing double no 20
scrollPadding EdgeInsets no EdgeInsets.zero

Scroll Mate Item

Parameter Type required default
item Widget yes –
leftMargin double no 0
rightMargin double no 0

Features

  • Multiple scroll controller works synchronization
  • Define a line count parameter to show users
  • Generic type can be used and custom widget you can show

Usage

ScrollMateList<String>(
      scrollMateModel: ScrollMateModel(
        lineCount: 4,
        items: Interests.list,
        title: buildInterestTitle(),
        builder: (String title, int index) {
          return ScrollMateItem(
            rightMargin: 20,
            leftMargin: 20,
            item: ScrollMateChip(title: title.toString(), index: index),
          );
        },
      ),
    );


const Padding(
      padding: EdgeInsets.only(bottom: 15, left: 20, top: 15),
      child: Text(
        'Interests',
        style: TextStyle(fontSize: 20, color: Color(0xff4c546d), fontWeight: FontWeight.bold),
      ),
    );


ScrollMateItem(
      rightMargin: 20,
      leftMargin: 20,
      item: Container(
        height: 40,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: const Color(0xff4c546d),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Text(
          title,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ).item;

GitHub

View Github