circular_clip_route

Description:

circular clip route

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(),
));
}
);
}
);
copied to clipboard
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:



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

Gabriel Terwesten • GitHub
@blaugold • Twitter
@GTerwesten • Medium
@gabriel.terwesten