vertical_card_pager 1.0.0
vertical_card_pager: ^1.0.0 copied to clipboard
Animated vertical card pager
Vertical Card Pager #
Animated Vertical Card Pager
Preview #
![](https://user-images.githubusercontent.com/35194820/84666831-8b787200-af5c-11ea-9bce-653c00d556fe.gif)
![](https://user-images.githubusercontent.com/35194820/84666824-89161800-af5c-11ea-898c-34b65e03f6c5.gif)
![](https://user-images.githubusercontent.com/35194820/84666830-8adfdb80-af5c-11ea-8383-878301d92179.gif)
![](https://user-images.githubusercontent.com/35194820/84659970-2b310280-af53-11ea-9ba0-67fbf9a67639.gif)
Installing #
-
Add dependency to
pubspec.yaml
Get the latest version in the 'Installing' tab on pub.dartlang.org
dependencies:
vertical_card_pager: ^1.0.0
- Import the package
import 'package:vertical_card_pager/vertical_card_pager.dart';
- Adding
VerticalCardPager
With optional parameters
@override
Widget build(BuildContext context) {
final List<String> titles = [
"RED",
"YELLOW",
"BLACK",
"CYAN",
"BLUE",
"GREY",
];
final List<Widget> images = [
Container(
color: Colors.red,
),
Container(
color: Colors.yellow,
),
Container(
color: Colors.black,
),
Container(
color: Colors.cyan,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.grey,
),
];
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Container(
child: VerticalCardPager(
textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
titles: titles,
images: images,
onPageChanged: (page) {
},
onSelectedItem: (index) {
},
),
),
),
],
),
),
);
}
How to use #
Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.
Reference #
This package's animation is inspired from from this Dribbble art.
TODO #
- Make proto type
- Add or Remove Item effect
- Add round edge in each item view
- Handle touch event
- deploy plug in