Synchronized Multiple Scroll Controllers: Define Line Display in Flutter

05 January 2024
0
269

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

ParameterTyperequireddefaultitemsList<T>yes–builderScrollMateItem Function(T title, int index)yes–lineCountintno2titleWidgetnoSizedBox()crossAxisAlignmentCrossAxisAlignmentnoCrossAxisAlignment.startcrossAxisSpacingdoubleno10mainAxisSpacingdoubleno20scrollPaddingEdgeInsetsnoEdgeInsets.zero

Scroll Mate Item

ParameterTyperequireddefaultitemWidgetyes–leftMargindoubleno0rightMargindoubleno0

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;