route_transitions 1.0.2
Route transitions #
A flutter library containing useful animations for routing . <br/>
Usage #
import 'package:route_transitions/route_transitions.dart'; // Add this
...
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.slide_up,
builder: (context) => DashBoard())); // this is required
}
...
PageRouteTransition class #
animationType, builder, curves
are the parameters . builder
are required
PageRouteTransition(
animationType: AnimationType.slide_up, // takes an animation type enum
builder: (context) => DashBoard(), // Takes a widget
curves: Curves.easeInOut, // Optional curve
);
Animation type #
AnimationType
is exposed from the route_transitions.dart
file itself . It is required and defines which animation to perform .
Slide from right #
In order to slide from right use this
PageRouteTransition(
animationType: AnimationType.slide_right,
builder: (context) => DashBoard(),
);
Slide from left #
In order to slide from left use this
PageRouteTransition(
animationType: AnimationType.slide_left,
builder: (context) => DashBoard(),
);
Slide from up #
In order to slide from up use this
PageRouteTransition(
animationType: AnimationType.slide_up,
builder: (context) => DashBoard(),
);
Slide from down #
In order to slide from down use this
PageRouteTransition(
animationType: AnimationType.slide_down,
builder: (context) => DashBoard(),
);
Fade animation #
In order to fade , use this
PageRouteTransition(
animationType: AnimationType.fade,
builder: (context) => DashBoard(),
);
Scale animation #
In order to scale , use this
PageRouteTransition(
animationType: AnimationType.scale,
builder: (context) => DashBoard(),
);
Full example #
import 'package:flutter/material.dart';
import 'package:route_transitions/route_transitions.dart';
void main() => runApp(MyApp());
const TextStyle style =
TextStyle(fontFamily: "Poppins", fontSize: 22, color: Colors.black);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
debugShowCheckedModeBanner: false,
);
}
}
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 8.0,
title: Text(
"Route animations",
style: style,
),
brightness: Brightness.light,
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Slide from right",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.SLIDE_RIGHT,
builder: (context) => DashBoard()));
},
),
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Slide from left",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.SLIDE_LEFT,
builder: (context) => DashBoard()));
},
),
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Slide from up",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.SLIDE_UP,
builder: (context) => DashBoard()));
},
),
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Slide from down",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.SLIDE_DOWN,
builder: (context) => DashBoard()));
},
),
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Fade",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.FADE,
builder: (context) => DashBoard()));
},
),
RaisedButton(
elevation: 0.0,
color: Colors.black,
child: Center(
child: Text(
"Scale",
style: style.copyWith(color: Colors.white),
),
),
onPressed: () {
Navigator.of(context).push(PageRouteTransition(
animationType: AnimationType.SACLE,
builder: (context) => DashBoard()));
},
),
],
),
),
);
}
}
class DashBoard extends StatelessWidget {
const DashBoard({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
title: Text(
"Dashboard",
style: style,
),
backgroundColor: Colors.white,
elevation: 8.0,
leading: IconButton(
icon: Icon(
Icons.chevron_left,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
body: Center(
child: Text(
"Dashboard",
style: style,
),
),
);
}
}
Todos #
- [ ] Add ripple effect
- [ ] Add rotating animations
- [x] Fixed enum names
1.0.2 #
- Fixed enum names
1.0.1 #
- Fixed gif links
1.0.0 #
- Dart 2.x support
- Added common animations
example #
A new Flutter project.
Getting Started #
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
route_transitions: ^1.0.2
2. Install it
You can install packages from the command line:
with Flutter:
$ flutter pub get
Alternatively, your editor might support flutter pub get
.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
import 'package:route_transitions/route_transitions.dart';
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
56
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
100
|
Overall:
Weighted score of the above.
[more]
|
78
|
We analyzed this package on Dec 14, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.0
- pana: 0.13.1+4
- Flutter: 1.12.13+hotfix.4
Dependencies
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.1.0 <3.0.0 | ||
flutter | 0.0.0 | ||
Transitive dependencies | |||
collection | 1.14.11 | 1.14.12 | |
meta | 1.1.8 | ||
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |