flutter_anchorlable

Description:

flutter anchorlable

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>
copied to clipboard
In your library add the following import:
import 'package:flutter_anchorlable/flutter_anchorlable.dart';
copied to clipboard
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();
copied to clipboard
jumpToAnchor jumps to the specified key.
controller.jumpToAnchor(anchorKey);
copied to clipboard
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);
}
copied to clipboard
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'
),
),
...
],
)
copied to clipboard
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'
),
),
...
],
);
copied to clipboard
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'
),
),
...
],
),
],
);
copied to clipboard
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'
),
),
...
],
),
],
);
copied to clipboard
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