flutter_anchorlable

This package provides freely scrollable widgets and their controllers, with key as the anchor.
You can play the demo here!

install

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

dependencies:
  flutter_anchorlable: <latest_version>

In your library add the following import:

import 'package:flutter_anchorlable/flutter_anchorlable.dart';

Usage

AnchorlableController is a controller that enables scrolling for widgets owned by the attached client.
By specifying initialAnchorKey, the initial scroll position of the attached client can be specified.

final controller=AnchorlableController();

jumpToAnchor jumps to the specified key.

controller.jumpToAnchor(anchorKey);

animateToAnchor performs animated scrolling for widgets with the target key.
If you are not sure which Curve to choose, you may find the this helpful.

onPressed: () async {
  await controller.animateToAnchor(anchor,
                duration: const Duration(seconds: 1),
                curve: Curves.fastOutSlowIn);
}

AnchorlableScrollColumn can be used to arrange widgets vertically.
It requires a Key and AnchorlableController.
By using AnchorlableController, it is possible to scroll the widget with the Key existing in the children.

final controller=AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
AnchorlableScrollColumn(
  controller:controller,
  children:[
    ...
    Container(
      child: Text(
        key:anchorKey,
        'Widgets you want to anchor'
        ),
    ),
    ...
  ],
)

AnchorlableScrollRow is a side-by-side version of AnchorlableScrollColumn.

final controller=AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
AnchorlableScrollRow(
  controller:controller,
  children:[
    ...
    Container(
      child: Text(
        key:anchorKey,
        'Widgets you want to anchor'
        ),
    ),
    ...
  ],
);

AnchorlableSliverColumn is an AnchorlableWidget that can be used with CustomScrollView. Unlike AnchorlableScrollColumn, it requires some work to handle AnchorlableController.

final controller = AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
CustomScrollView(
  controller: controller,
  slivers: [
    AnchorlableSliverColumn(,
      children: [
        ...
        Container(
          child: Text(
            key:anchorKey,
            'Widgets you want to anchor'
            ),
        ),
        ...
      ],
    ),
  ],
);

AnchorlableSliverRow is a side-by-side version of AnchorlableSliverColumn.

final controller = AnchorlableController();
const anchorKey = GlobalObjectKey('anchor');
CustomScrollView(
  controller: controller,
  slivers: [
    AnchorlableSliverRow(
      children: [
        ...
        Container(
          child: Text(
            key:anchorKey,
            'Widgets you want to anchor'
            ),
        ),
        ...
      ],
    ),
  ],
);

Contact

If you have anything you want to inform me (@yama-yeah), such as suggestions to enhance this package or functionalities you want etc, feel free to make issues on GitHub