A small library for creating snapping lists.

Overview

awesome flutter pub package

snaplist

A small cozy library that allows you to make snappable list views.

Issues and Pull Requests are really appreciated!

Snaplist supports different and even dynamically sized children to be listed and correctly snapped.

Showcase

Showscase gif

Include to your project

In your pubspec.yaml root add:

dependencies:
  snaplist: ^0.1.8

Include

The library does provide StatefulWidget which is called SnapList.

Include the widget like this: import 'package:snaplist/snaplist.dart';

Usage

Use it as you'd use any widget:

Widget build(BuildContext context) {
  return SnapList(
    sizeProvider: (index, data) => Size(100.0, 100.0),
    separatorProvider: (index, data) => Size(10.0, 10.0),
    builder: (context, index, data) => SizedBox(),
    count: 1,
  );
}

Snaplist uses gesture detection for swiping the list, so, please, be sure that the gestures you apply to the widgets inside are not overlapping for best user experience.

Properties

There are 4 required fields:

  • sizeProvider is a provider of each widget size. The library will wrap each built widget to a sized box of specified size. This is required so snapping calculations will work correctly.
  • separatorProvider is similar to sizeProvider, but this size will be used to build the list separators.
  • builder works like a regular Flutter builder all of us are familiar with. It will pass you the context, current item index and some additional data.
  • count - Children count as in a ListView.

The data which is provided to each provider and the builder is a combination of three fields:

  • center - is the position which is now displayed and referenced as the center widget.
  • next - is the position which the user is scrolling to. It is -1 if idle.
  • progress - is the scroll and snip progress. The values are from 0 to 100.

Snaplist defaults to horizontal scrolling. You can set axis to Axis.vertical for vertical scrolling.

Comments
  • Future update not reflecting

    Future update not reflecting

    Hi, Thanks for this great plugin. But I am facing one issue in this.

    Once you bind the SnapList on page it is not updating when data changed. I tried this with streambuilder, futurebuilder & async data list.

    In FutureBuilder & StreamBuilder, its loading the data & list count is changed but SnapList items are not changing. Also it keep firing positionUpdate callback after list refresh.

    In async data list, one the page load I am getting the data from server & when I call setState its showing first item. No gesture is working & positionUpdate callback fires with index as "-1".

    I am trying now with this project's branch. Will let you know if I found something.

    opened by kumar-aakash86 5
  • Initial scroll to position

    Initial scroll to position

    First, thank you for this awesome plugin. Looking forward to using it.

    Because there is no controller accepted as a parameter to the SnapList constructor, there is no way to facilitate starting at an initial index, or scrolling to a particular index. It would be wonderful if such functionality could be added.

    opened by jasonkaruza 3
  • add verticalScrolling

    add verticalScrolling

    Fixing #5.

    Seems there are some setting value which should reset after changing direction. I had to restart app when testing vertical scrolling, not hot reload.

    Please take a look :) Thanks!

    opened by raacker 3
  • snaplist padding

    snaplist padding

    I tried to use this package but i do not understand how padding works. In example with horizontal padding there is only padding.left property used. If i remove padding property - snap list item have 0 lef padding, but still it is centered vertical, so i assume it has vertical padding. How can i remoe all paddins or set my own?

    opened by spacekestrel 0
  • Not working

    Not working

    Including the library and perfomre the "Showcase" example does not work. Nothing happens. The examples also didn't work. You have to copy the example code and create new files then import them. Anyways, how to get to work the "showcase" example?

    opened by seansabe 0
  • Handling dynamic hight changes (Re-Sizing) using snapList and SliverPersistentHeader

    Handling dynamic hight changes (Re-Sizing) using snapList and SliverPersistentHeader

    Hello Sir I have been trying to use your package for a while now and I am not able to Re-size your widget dynamically (actually i can, but the current snapped object goes off the view) and I am not able to maintain the current object in view(it goes off left). HERE is a link to a small video showcasing the issue : and here is the code of the SliverPersistentHeaderDelegate I attempted to do : CodePile code. I also mailed you on your email ID Ps: SizeConfig is nothing more than just ((MeDiaQuery.of(context).size.[widthORheight])/100) = percentage of the screen in blocs

    opened by PavieOlivier 0
Owner
David Leibovych
David Leibovych
A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles with Flutter.

vector_tile_renderer A vector tile renderer for use in creating map tile images or writing to a canvas. Written in Dart to enable use of vector tiles

David Green 30 Oct 7, 2022
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jesús Rodríguez 44 Dec 6, 2022
Lightweight Flutter form library

LoForm ?? LoForm is still experimental, missing features and bugs are to be expected. LoForm is a low-code and lightweight Flutter form library, inspi

Youssef Raafat 78 Dec 30, 2022
Toast Library for Flutter

A Powerful Toast Library for Flutter. Easily create toast messages in single line of code with leading image options.

Sanket Vekariya 8 Apr 25, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

David Leibovych 415 Dec 21, 2022
Flutter 2.0 (Null safety) Snapping Modal Bottom Sheet made using sliding sheet package. 🔖

Snapping Modal Bottom Sheet Developement Stack Getting Started This project is a starting point for a Flutter application. A few resources to get you

Nakshatra Singh 3 Sep 20, 2021
An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

AliYigitBireroglu 101 Dec 16, 2022
On making this project I learned using Getx to change between dark mode to light mode, learned about the time zone and schedule notification , That I have Integrated in this small app, This is the small section of making a todo app.

On making this project I learned using Getx to change between dark mode to light mode, learned about the time zone and schedule notification , That I have Integrated in this small app, This is the small section of making a todo app.

Pawan Kumar 1 Aug 22, 2022
A graphics engine for creating 2D games. Creating objects based on composition and painting on canvas.

A graphics engine for creating 2D games. Creating objects based on composition and painting on canvas.

Stanislav 10 Oct 26, 2022
A simple Flutter app that lists all the 151 1st generation pokemóns.

Pokémon App A simple Flutter project that lists all the 151 1st generation pokemóns. This project was created for study purposes. Installation You can

Marcelo Dornelles Junior 19 Sep 13, 2022
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
A flutter package provides controllers and editors for complex models and lists

This package provides controllers and editors for complex models and lists and is inspired by simplicity of TextEditingController. It encapsulates sta

null 2 Sep 1, 2022
A showcase app for displaying image lists, developed on Flutter.

flutter_showcase_app Pixabay: A Flutter demo application. A showcase app for displaying image lists, developed on Flutter. Uses BLOC pattern, SQFLite

Muhammad Umair Adil 26 Nov 25, 2022
A Flutter plugin that lists native gallery items.

Media Gallery plugin for Flutter A Flutter plugin that lists native gallery items. Installation First, add media_gallery as a dependency in your pubsp

Aloïs Deniel 84 Dec 7, 2022
Flutter package for drag-and-drop reordering of two-level lists

drag_and_drop_lists Two-level drag and drop reorderable lists. Features Reorder elements between multiple lists Reorder lists Drag and drop new elemen

Philip Brink 168 Dec 18, 2022
Cupertino_lists - an implementation of iOS-style lists (grouped and inset grouped).

cupertino_lists cupertino_lists is an implementation of iOS-style lists (grouped and inset grouped). Warning: This package probably will not be mainta

null 13 Nov 3, 2022
A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and animates between them for you

A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and animates between them for you

Vojtech Pavlovsky 2 Dec 16, 2022
Spider - A small dart library to generate Assets dart code from assets folder.

Spider A small dart library to generate Assets dart code from assets folder. It generates dart class with static const variables in it which can be us

Birju Vachhani 159 Nov 8, 2022
A small library support load infinite for ListView - GridView on Flutter.

Paging A Flutter package that supports pagination(load infinite) for ListView, GridView Demo DataSource PageKeyedDataSource To create a PagingListView

Đặng Ngọc Đức 32 Dec 4, 2022