https://github.com/ariedov/flutter_snaplist

A small library for creating snapping lists.
https://github.com/ariedov/flutter_snaplist

List: flutter_snaplist

android awesome bloc dart flutter ios mobile

Last synced: 2 months ago
JSON representation

A small library for creating snapping lists.

• Host: GitHub
• URL: https://github.com/ariedov/flutter_snaplist
• Owner: ariedov
• License: mit
• Created: 2018-10-18T21:39:37.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-03-20T12:32:47.000Z (almost 4 years ago)
• Last Synced: 2024-10-27T21:16:49.883Z (3 months ago)
• Topics: android, awesome, bloc, dart, flutter, ios, mobile
• Language: Dart
• Homepage:
• Size: 96.7 KB
• Stars: 454
• Watchers: 8
• Forks: 53
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flutter-cn - Snaplist - 创建可捕捉的列表视图，由[David Leibovych](https://github.com/ariedov)创建。 (组件 / UI)
• awesome-flutter - Snaplist - A small library for creating snapping lists. ` 📝 a year ago ` (UI [🔝](#readme))
• awesome-flutter-cn - Snaplist - 创建可移除项目的滑动展示列表，[David Leibovych](https://github.com/ariedov). (组件 / UI)

README

        
[![awesome flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://stackoverflow.com/questions/tagged/flutter?sort=votes)

[![pub package](https://img.shields.io/pub/v/snaplist.svg)](https://pub.dartlang.org/packages/snaplist)

# 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](https://media.giphy.com/media/27bTHalyweVoc2psS2/giphy.gif)

## Include to your project

In your `pubspec.yaml` root add:

```yaml

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:

```dart

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.