scroll_mate 1.0.1

Multiple scroll controller work synchronization and define how many line to display

Scroll Mate

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

Preview

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.

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

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

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;

Other Usage

You can create own scroll controller widget. Just use the initialize function in your initState function and send scrollController list as a parameter.

  final scrollController = ScrollController();
  final scrollController2 = ScrollController();

  @override
  void initState() {
    super.initState();
    ScrollMateController.instance.initController(
      scrollControllers: [scrollController, scrollController2],
    );
  }