vertical_card_pager 1.0.0

Animated vertical card pager

Vertical Card Pager

Animated Vertical Card Pager

Preview

Installing

1. Add dependency to pubspec.yaml

   Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:
    vertical_card_pager: ^1.0.0

2. Import the package

import 'package:vertical_card_pager/vertical_card_pager.dart';

3. 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