circular_clip_route

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

CircularClipRoute is a Flutter package that enables smooth, animated page transitions by revealing a new screen through an expanding circular clip from a specified anchor widget. This creates a visually engaging effect similar to a ripple or zoom-in animation, enhancing user experience in navigation. It's ideal for apps where subtle, dynamic transitions improve interface flow and visual appeal. The route works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior. Built with Dart, it integrates seamlessly into existing Flutter projects.

Use cases

Animated onboarding screens
Interactive navigation between pages
Visual feedback during state changes
Enhancing app launch experiences
Creating engaging splash screens

Key features

Circular expansion animation
Customizable anchor widget
Cross-platform compatibility
Smooth transition effects
Easy integration with Navigator

Suitable for

App developers seeking engaging transitions
Designers focused on micro-interactions
Projects with interactive UI elements
Mobile and web applications
Apps emphasizing visual storytelling

Considerations

May impact performance on low-end devices
Requires careful placement of anchor widget
Not suitable for simple, fast navigations
Limited customization beyond basic parameters
Best used sparingly to avoid distraction

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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 Terwesten • GitHub @blaugold • Twitter @GTerwesten • Medium @gabriel.terwesten

Search packages, repositories and app categories

Install package