カテゴリー・パッケージ・リポジトリを検索

vertical_card_pager のカバー
パッケージ詳細v1.6.3

vertical_card_pager

ダイナミックで美しいカードビューのページャーを使用して、素晴らしいアプリを作成しましょう。

AndroidiOSWeb
30日間ダウンロード
314
いいね数
313
Pub ポイント
140

パッケージをインストール

flutter pub add vertical_card_pager

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

開発者が動的で視覚的に魅力的な垂直カードページャーを作成できるFlutterパッケージです。スムーズなスクロールとインタラクティブなカード遷移をサポートしており、レイヤードで魅力的な方法でコンテンツを提示するのに最適です。Android、iOS、Web用に設計されており、洗練されたアニメーションと応答性のあるレイアウトにより、ユーザー体験を向上させます。このパッケージは、没入型のカードベースのナビゲーションやコンテンツ表示が必要なアプリに特に役立ちます。

用途

  • インタラクティブ製品ショーケース
  • ユーザー・プロフィールスライダー
  • コンテンツカルーセル
  • 教育用アプリケーションインターフェース
  • メディアブラウジング体験

主な機能

  • スムーズな垂直カード遷移
  • カスタマイズ可能なカードの外観
  • 複数プラットフォームにわたる応答性のあるデザイン
  • タッチジェスチャーのサポート
  • 組み込みアニメーション効果

適している対象

  • モバイルおよびウェブアプリ開発者
  • デザインに焦点を当てたアプリケーション
  • カードベースのUI実装
  • 豊富なビジュアルコンテンツを備えたアプリ

注意事項

  • 大規模なデータセットに対してパフォーマンス最適化が必要になる可能性があります
  • 複雑なレイアウトに対するカスタマイズの制限
  • すべてのプラットフォームでの安定したジェスチャー処理に依存しています

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。



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

Preview

Alignment

Left Center(Default) Right
left center right

Installing

  1. Add dependency to pubspec.yaml

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

dependencies:
    vertical_card_pager: ^1.6.0
  1. Import the package
import 'package:vertical_card_pager/vertical_card_pager.dart';
  1. 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
                  physics : ClampingScrollPhysics() // 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 on Web

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

Reference

This package's animation is inspired from from this Dribbble art.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。