offline-first / flutter-concentric-transition Goto Github PK

View Code? Open in Web Editor NEW

A Flutter plugin to create views using concentric transition effect.

License: MIT License

Kotlin 0.52% Swift 1.71% Objective-C 0.16% Dart 82.01% HTML 15.60%

flutter-concentric-transition's Introduction

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

Getting Started

Add this to your pubspec.yaml

dependencies:
concentric_transition: ^1.0.1

Get the package from Pub:
```
flutter packages get
```

Import it in your file

import 'package:concentric_transition/concentric_transition.dart';

Features

Concentric PageView
Concentric Clipper
Concentric PageRoute

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 ConcentricPageRoute widget

Navigator.push(context, ConcentricPageRoute(builder: (ctx) {
  return NextPage();
}));

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,
  ),
)