Concentric Transition

A Flutter plugin to create views using Concentric Transition Clipper. Useful for onboarding, page transitions, custom clippers, painters etc.

Inspired by Cuberto - Animated Onboarding Screens

Build Status Pub package Star on GitHub License: MIT

example.gif

Getting Started

  • Add this to your pubspec.yaml
    dependencies:
    concentric_transition: ^0.1.0
    
  • Get the package from Pub:
    flutter packages get
    
  • Import it in your file
    import 'package:concentric_transition/concentric_transition.dart';
    

Usage

  • Using ConcentricPageView widget
 import 'package:concentric_transition/concentric_transition.dart';
 
 ConcentricPageView(
    colors: <Color>[Colors.white, Colors.blue, Colors.red],
    itemCount: 1, // null = infinity
    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (int index, double value) {
        return Center(
            child: Container(
                child: Text('Page $index'),
            ),
        );
    },
 );
  • Using ConcentricClipper widget
 import 'package:concentric_transition/concentric_transition.dart';
 
 ClipPath(
   clipper: ConcentricClipper(
     progress: 0.1, // from 0.0 to 1.0
     reverse: false,
     radius: 30.0,
     verticalPosition: 0.82,
   ),
   child: Container(
     color: Colors.green,
   ),
 )

Roadmap

  • Page Route
  • Tests

Credits

Maintainers

License

License: MIT

Libraries

clipper
concentric_transition
page_route
page_view