List_Positioned_Scroll_Button

Control Scroll of Scrollable Positioned List with Next and Previous button in Flutter. Based on scrollable_positioned_list.

Showcase

Scroll for pageitemcount:8

Highlight -

Easy Scroll to next and previous pages in sliders. Just use ScrollNext in onPressed function for next page scrolling and ScrollBack for back page. A full example can be found in the examples.

Features

  • Easy scrolling with built-in functions.
  • Make the pages with your desired no. of items
  • Animated Scrolling

Getting Started

Add list_positioned_scroll_button in your pubspec.yaml,

  dependencies:
     list_positioned_scroll_button: ^0.0.1

In your dart file, import the library:

import 'package:list_positioned_scroll_button/list_positioned_scroll_button.dart';

Create a Scrollable Positioned List and change itsitemscrollcontroller to ListPositionedScrollButton.itemscrollcontroller

ScrollablePositionedList.builder(
                    scrollDirection: Axis.horizontal,
                    itemScrollController: ListPositionedScrollButton.itemscrollcontroller,
                    itemCount: _myList.length,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Tile(
                            text: _myList[index],
                          color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
                        ),
                      );
                    },
                  ),

Now, create your button for scroll to next/prev page and in OnPressed, add function :

For Next Page Scroll,add ScrollNext() function and specify pageitemcount(no. of items of list in one page):

            ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: ElevatedButton(
                        onPressed: () {
                          ScrollNext(
                            pageitemcount: 8,
                          );
                        },
                        child: const Text('Next',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                            color: Colors.white
                          ),
                        ),
                        style: ElevatedButton.styleFrom(
                            primary: Colors.red,
                            onSurface: Colors.yellow,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(50))),
                      ),
                    ),

For Previous Page Scroll,add ScrollBack() function and specify pageitemcount(no. of items of list in one page):

            ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: ElevatedButton(
                        onPressed: () {
                          ScrollBack(
                            pageitemcount: 8,
                          );
                        },
                        child: const Text('Prev',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                            color: Colors.white
                          ),
                        ),
                        style: ElevatedButton.styleFrom(
                            primary: Colors.red,
                            onSurface: Colors.yellow,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(50))),
                      ),
                    ),

For better scrolling to both sides, make sure to keep pageitemcount same for both ScrollNext and ScrollBack function.

Parameters:

NameDescriptionRequiredDefault value
pageitemcountnumber of item in One page of Scrollrequired-

Coming Soon

  • More parameter will be added.
  • Option to change scroll animations.

Used packages:

Package nameCopyrightLicense
scrollable_positioned_listCopyright 2018 the Dart project authors, Inc. All rights reservedBSD 3-Clause "New" or "Revised" License

Social Media:

Libraries

list_positioned_scroll_button