https://github.com/Origogi/Vertical_Card_Pager

Use dynamic and beautiful card view pagers to help you create great apps.
https://github.com/Origogi/Vertical_Card_Pager

fluter fluter-ui flutter-plugin

Last synced: 3 months ago
JSON representation

Use dynamic and beautiful card view pagers to help you create great apps.

• Host: GitHub
• URL: https://github.com/Origogi/Vertical_Card_Pager
• Owner: Origogi
• License: bsd-2-clause
• Created: 2020-06-14T05:44:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-20T14:14:04.000Z (9 months ago)
• Last Synced: 2024-07-30T23:06:35.304Z (3 months ago)
• Topics: fluter, fluter-ui, flutter-plugin
• Language: Dart
• Homepage:
• Size: 51.4 MB
• Stars: 96
• Watchers: 6
• Forks: 28
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        



    







	

    

  

  

   






Use dynamic and beautiful card view pagers to help you create great apps.

## Preview

















## Alignment

| Left | Center(Default) | Right |

|:--------:|:--------:|:--------:|

|![left](https://user-images.githubusercontent.com/35194820/87397350-2eb9b700-c5ef-11ea-8015-27901cbaa669.png)|![center](https://user-images.githubusercontent.com/35194820/87397353-2f524d80-c5ef-11ea-9bc5-7d4b6c72364d.png)|![right](https://user-images.githubusercontent.com/35194820/87397346-2ceff380-c5ef-11ea-88a1-d6e53612f9bc.png)|

## Installing

1. Add dependency to `pubspec.yaml`

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

```dart

dependencies:

    vertical_card_pager: ^1.6.0

```

2. Import the package

```dart

import 'package:vertical_card_pager/vertical_card_pager.dart';

```

3. Adding `VerticalCardPager`

*With optional parameters*

```dart

  @override

  Widget build(BuildContext context) {

    final List titles = ["RED", "YELLOW", "BLACK", "CYAN", "BLUE", "GREY", ];

    final List 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: [

            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

                  physics : ClampingScrollPhysics() // optional 

                ),

              ),

            ),

          ],

        ),

      ),

    );

  }

```

## How to use

Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.

### Example on Web





https://origogi.github.io/Vertical_Card_Pager/#/



## Reference

This package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/5097519-California-National-Park-Guide?utm_source=Clipboard_Shot&utm_campaign=KEVINGAUTIER&utm_content=California%20National%20Park%20Guide&utm_medium=Social_Share) art.