Giter Club home page Giter Club logo

scroll-to-index's Introduction

scroll-to-index

This package provides the scroll to index mechanism for fixed/variable row height for Flutter scrollable widget.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  scroll_to_index: any

In your library add the following import:

import 'package:scroll_to_index/scroll_to_index.dart';

For help getting started with Flutter, view the online documentation.

Usage

This is a widget level library, means you can use this mechanism inside any Flutter scrollable widget.

Example for Flutter ListView

ListView(
  scrollDirection: scrollDirection,
  controller: controller,
  children: randomList.map<Widget>((data) {
  	final index = data[0];
  	final height = data[1];
    return AutoScrollTag(
      key: ValueKey(index),
      controller: controller,
      index: index,
      child: Text('index: $index, height: $height'),
      highlightColor: Colors.black.withOpacity(0.1),
    );
  }).toList(),
)

you can wrap any of your row widget which has dynamic row height

AutoScrollTag(
  key: ValueKey(index),
  controller: controller,
  index: index,
  child: child
)

with the AutoScrollController controller.

when you need to trigger scroll to a specified index, you can call

controller.scrollToIndex(index, preferPosition: AutoScrollPosition.begin)

even more, with a fixed row height, you can give it a suggested height for more efficient scrolling. there are more configuration.

final controller = AutoScrollController(
  //add this for advanced viewport boundary. e.g. SafeArea
  viewportBoundaryGetter: () => Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),

  //choose vertical/horizontal
  axis: scrollDirection,

  //this given value will bring the scroll offset to the nearest position in fixed row height case.
  //for variable row height case, you can still set the average height, it will try to get to the relatively closer offset 
  //and then start searching.
  suggestedRowHeight: 200
);

for full example, please see this Demo.

Who Uses

  • Quire - a simple, collaborative, multi-level task management tool.

scroll-to-index's People

Contributors

alexays avatar jerrywell avatar mideb avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.