Use dynamic and beautiful card view pagers to help you create great apps.
Preview
New Feature
v1.3.0
- Change Alignment
| Left | Center(Default) | Right |
|---|---|---|
 |
 |
 |
v1.4.0
- Enable Web
Installing
-
Add dependency to
pubspec.yamlGet the latest version in the 'Installing' tab on pub.dartlang.org
dependencies:
vertical_card_pager: ^1.5.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(
titles: titles, // required
images: images, // required
textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), // optional
onPageChanged: (page) { // optional
},
onSelectedItem: (index) { // optional
},
initialPage: 0, // optional
align : ALIGN.CENTER // optional
),
),
),
],
),
),
);
}
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.
Example
Example on Web
https://origogi.github.io/Vertical_Card_Pager/#/
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
- Add card alignment
2.3k Jan 8, 2023
789 Jan 3, 2023
953 Dec 22, 2022
221 Dec 27, 2022
2.1k Dec 30, 2022
258 Dec 25, 2022
183 Dec 21, 2022
985 Jan 5, 2023
1k Jan 5, 2023