Scroll Positioned

Allows you to position widgets fixed along with a scroll. It can be positioned relative to the parent widget, or the absolute position. Best used with a Scrollable, like a ListView, but can be used on its own.

This uses the widgets Positioned and Stack, if there isn't a stack it will create one for you.

For the absolute position, this uses the widget Transform.translate.

Features

• Fix a widget in a scrollable widget.
• Works in horizontal and vertical scrollable.
• Set the position relative to the top, left, right or bottom.
• Set the size.
• Use ScrollPositioned.extend to extend the widget relative to the parent widget.
• Use ScrollPositioned.absolute to set the position to the absolute position.

Getting started

Install it using pub:

dart pub add scroll_positioned

And import the package:

import 'package:scroll_positioned/scroll_positioned.dart';

Usage

To have the widget fixed where it is, all you need to do is:

ScrollPositioned(
  child: ... ,
);

Set the position relative to the top, left, right or bottom of the parent widget:

ScrollPositioned(
  top: 50,
  left: 0,
  right: 0,

  child: ... ,
);

Set the size of the widget with width and height, or use ScrollPosition.extend to extend relative to the parent widget:

ScrollPositioned(
  width: 100,
  height: 100,

  child: ... ,
);

ScrollPositioned.extend(
  child: ... ,
);

Position the widget to the absolute position, bottom and right cannot be set:

ScrollPositioned.absolute(
  top: 100,
  left: 100,

  child: ... ,
);

For flexibility, a scroll controller can be passed, if not then it will try to find one:

final scrollController = ScrollController();
ScrollPositioned(
  controller: scrollController,
  child: ... ,
);

In some cases, when using ScrollPositioned.absolute, if the children of the parent change sizes, making the widget move position, the absolute position will not update unless it's built again, one frame after.

Examples

Click to interact on DartPad