circular_clip_route 0.2.0+3 copy "circular_clip_route: ^0.2.0+3" to clipboard
circular_clip_route: ^0.2.0+3 copied to clipboard

A page route, which reveals its page by expanding a circular clip from an anchor widget.

pub.dev package page GitHub Stars

A page route, which reveals its page by expanding a circular clip from an anchor widget.


If you're looking for a database solution, check out cbl, another project of mine. It brings Couchbase Lite to standalone Dart and Flutter, with support for:

  • Full-Text Search,
  • Expressive Queries,
  • Data Sync,
  • Change Notifications

and more.


Getting started #

To use the CircularClipRoute, provide it the context from which the animation should expand and push it onto the navigation stack. One way to get the right context is to use a Builder, which wraps the widget from which the route should expand:

final navigationTrigger = Builder(
    builder: (context) {
      return IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () {
            Navigator.push(context, CircularClipRoute<void>(
              // This context will be used to determine the location and size of
              // the expanding clip. Here this will resolve to the `IconButton`.
              expandFrom: context,
              builder: (_) => MyRoute(),
            ));
          }
      );
    }
);

Also, take a look at the API docs for customizing the animation.

Example #

The example implements the demo at the top.

References #

Inspired by this shot.

This drawing visualizes the geometry involved in creating the route transition:

Illustration of the geometry of the transition

The Anchored Custom Routes article explains how to implement routes, that are anchored to a widget, generally.


Gabriel TerwestenGitHub @blaugoldTwitter @GTerwestenMedium @gabriel.terwesten

125
likes
140
pub points
80%
popularity

Publisher

verified publishergabriel.terwesten.net

A page route, which reveals its page by expanding a circular clip from an anchor widget.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_clip_route