A small library for creating snapping lists.

Related tags

Animation android dart ios awesome mobile flutter bloc
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
GitHub
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 small splashscreen used as intro for flutter applications easily with a lot of customizations ❤️🥳

Splash Screen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization Currently Supported by awe

DPLYR 283 Dec 30, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Romain Rastel 291 Oct 21, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
A library for handling animation warmup generically

This solution is not very scalable for applications with many animations to warm up and is meant mostly as an example of an approach applications could take to warmup their animations until a more permanent solution is available.

Dan Reynolds 42 Nov 19, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Daniel 0 Jan 6, 2022
A library for pretty shadows.

shine.js A library for pretty shadows. See the working demo at http://bigspaceship.github.io/shine.js/. Get Started Install using bower: bower install

Big Spaceship 2.2k Dec 23, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
Flutter percent indicator library

Percent Indicator Circular and Linear percent indicators Features Circle percent indicator Linear percent indicator Toggle animation Custom duration o

Diego Velásquez López 596 Dec 30, 2022
Load and get full control of your Rive files in a Flutter project using this library.

⚠️ Please migrate to the new Rive Flutter runtime. This runtime is for the old Rive (formerly Flare) and will only receive updates for breaking issues

2D, Inc 2.6k Dec 31, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
A flutter package which display the library collapse according to the number of images associated with hero animation

?? Gallery Collapse A flutter package which display the library collapse accordi

null 6 Sep 12, 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