snap 1.0.1

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

snap

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets. Inspired by WhatsApp's in-app Youtube player.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

Media | Description | How-to-Use

Notice

• flick works as intended on actual devices even if it might appear to fail rarely on simulators. Don't be discouraged!

---

Recent

• flick is now added. It is amazing! See Media for examples.

---

Media

Videos

• v1.0.0 with Flick
  
  
• v0.1.0

GIFs

Description

This is a very detailed snap tool/widget that allows very flexible snap management and snapping between your widgets. Just wrap your snapper widget with the SnapController widget, fill the parameters, define your snappable widget and this package will take care of everything else.

How-to-Use

"The view is what is being moved. It is the widget that snaps to the bound. The bound is what the view is being snapped to."

First, define two GlobalKeys- one for your view and one for your bound:

GlobalKey bound = GlobalKey();
GlobalKey view = GlobalKey();

Then, create a SnapController as shown in the example project:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Align(
      key: bound,
      alignment: const Alignment(-1.0, -1.0),
      child: SnapController(
        normalBox(view, "Move & Snap", Colors.redAccent),
        true,
        view,
        bound,
        Offset.zero,
        const Offset(1.0, 1.0),
        const Offset(0.75, 0.75),
        const Offset(0.75, 0.75),
        snapTargets: [
          const SnapTarget(Pivot.topLeft, Pivot.topLeft),
          const SnapTarget(Pivot.topRight, Pivot.topRight),
          const SnapTarget(Pivot.bottomLeft, Pivot.bottomLeft),
          const SnapTarget(Pivot.bottomRight, Pivot.bottomRight),
          const SnapTarget(Pivot.center, Pivot.center)
        ])))])

Widget normalBox(Key key, String text, Color color) {
  return Container(
    key: key,
    width: 200,
    height: 200,
    color: Colors.transparent,
    child: Padding(
      padding: const EdgeInsets.all(5),
      child: Container(
      constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        color: color,
        borderRadius: const BorderRadius.all(const Radius.circular(10.0))),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 25))))));
}

In this excerpt, the bound is the Align widget which expands through the column. The view is the normalBox widget. The SnapController is confined between Offset.zero and Offset(1.0, 1.0). This means the view will not exceed the limits of the bound. The flexibility is confined between Offset(0.75, 0.75) and Offset(0.75, 0.75). This means that the view can be moved beyond the horizontal/vertical min/max constraints with a flexibility of 0.75 before it snaps. The snapTargets determine to where the view should snap once the movement is over. In this example:

1. The top left corner of the view can snap to the top left corner of the bound.
2. The top right corner of the view can snap to the top right corner of the bound.
3. The bottom left corner of the view can snap to the bottom left corner of the bound.
4. The bottom right corner of the view can snap to the bottom right corner of the bound.
5. The center of the view can snap to the center of the bound.

Keep in mind that these constant values are provided only for the ease of use. snapTargets can consist of any values you wish.

Notes

I started using and learning Flutter only some weeks ago so this package might have some parts that don't make sense, that should be completely different, that could be much better, etc. Please let me know! Nicely!

Any help, suggestion or criticism is appreciated!

Cheers.