Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tiamo/flutter-concentric-transition
Flutter plugin for creating views using the concentric transition effect.
https://github.com/tiamo/flutter-concentric-transition
animation concentric dart flutter flutter-app flutter-package flutter-plugin flutter-ui onboarding
Last synced: 3 months ago
JSON representation
Flutter plugin for creating views using the concentric transition effect.
- Host: GitHub
- URL: https://github.com/tiamo/flutter-concentric-transition
- Owner: tiamo
- License: mit
- Created: 2019-11-15T10:59:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-09T10:14:42.000Z (about 2 years ago)
- Last Synced: 2024-06-19T23:29:11.420Z (5 months ago)
- Topics: animation, concentric, dart, flutter, flutter-app, flutter-package, flutter-plugin, flutter-ui, onboarding
- Language: Dart
- Homepage:
- Size: 6.8 MB
- Stars: 223
- Watchers: 1
- Forks: 53
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ➰ 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](https://dribbble.com/shots/6654320-Animated-Onboarding-Screens)
[![Build Status](https://github.com/tiamo/flutter-concentric-transition/actions/workflows/main.yml/badge.svg)](https://github.com/tiamo/flutter-concentric-transition)
[![Pub package](https://img.shields.io/pub/v/concentric_transition.svg)](https://pub.dartlang.org/packages/concentric_transition)
[![Star on GitHub](https://img.shields.io/github/stars/tiamo/flutter-concentric-transition.svg?style=flat&logo=github&colorB=deeppink&label=stars)](https://github.com/tiamo/flutter-concentric-transition)
[![License: MIT](https://img.shields.io/badge/license-MIT-purple.svg)](https://opensource.org/licenses/MIT)![1.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/1.gif)
![2.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/2.gif)
![3.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/3.gif)
![4.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/4.gif)
![5.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/5.gif)
![6.gif](https://github.com/tiamo/flutter-concentric-transition/raw/master/screens/6.gif)## Getting Started
* Add this to your pubspec.yaml
```
dependencies:
concentric_transition: ^1.0.3
```
* 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
``` dart
import 'package:concentric_transition/concentric_transition.dart';
ConcentricPageView(
colors: [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
``` dart
Navigator.push(context, ConcentricPageRoute(builder: (ctx) {
return NextPage();
}));
```
* Using ConcentricClipper widget
``` dart
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,
),
)
```
* Check out the complete [Example](https://github.com/tiamo/flutter-concentric-transition/tree/master/example)## Credits
* [Cuberto - Animated Onboarding Screens](https://dribbble.com/shots/6654320-Animated-Onboarding-Screens)
## Maintainers
* [Vlad Korniienko](https://github.com/tiamo)
## License[![License: MIT](https://img.shields.io/badge/license-MIT-purple.svg)](https://opensource.org/licenses/MIT)