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:
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