list_positioned_scroll_button 0.0.15 copy "list_positioned_scroll_button: ^0.0.15" to clipboard
list_positioned_scroll_button: ^0.0.15 copied to clipboard

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

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: #

Name Description Required Default value
pageitemcount number of item in One page of Scroll required -

Coming Soon #

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

Used packages: #

Package name Copyright License
scrollable_positioned_list Copyright 2018 the Dart project authors, Inc. All rights reserved [BSD 3-Clause "New" or "Revised" License]

Social Media: #

2
likes
110
pub points
10%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, scrollable_positioned_list

More

Packages that depend on list_positioned_scroll_button