パッケージ、リポジトリ、アプリカテゴリを検索

ducafecatFlutter エコシステムナビ
パッケージ詳細v1.0.1

expansion_card

オプションのアニメーション画像背景を備えたカスタマイズ可能なFlutter拡張カード。

AndroidiOSWebmacOSWindowsLinux
pub.dev API ドキュメント ソースコード
30日間ダウンロード
156
いいね数
301
Pub ポイント
150

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

flutter pub add expansion_card

パッケージ概要

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

expansion_card パッケージは、オプションのアニメーション画像背景を備えた折りたたみ可能なカードを実装できるカスタマイズ可能な Flutter ウィジェットを提供します。FAQ、詳細情報、インタラクティブなセクションなどの拡張コンテンツを表示するのに最適です。すべての主要プラットフォームでスムーズなアニメーションと応答性のあるデザインをサポートしています。開発者は、アプリのUIに合わせてカードの外観、動作、遷移効果をカスタマイズできます。このパッケージは軽量であり、既存のFlutterプロジェクトへの統合もスムーズです。

用途

  • よくある質問セクションの表示
  • 詳細な製品情報の表示
  • インタラクティブなアコーディオンの作成
  • フォームでレイヤードコンテンツを提示する
  • ユーザーのオンボーディングフローの向上

主な機能

  • カスタマイズ可能なカードスタイル
  • アニメーション画像の背景
  • スムーズな展開／折りたたみの遷移
  • クロスプラットフォーム対応
  • Flutter との簡単な統合
  • 設定可能なアニメーション期間

適している対象

  • インタラクティブなUIを構築する開発者
  • 展開可能なコンテンツセクションを必要とするアプリ
  • アニメーション付きカードコンポーネントを探しているデザイナー
  • 複数プラットフォーム向けのプロジェクト
  • 動的なコンテンツを含むUI重視のアプリケーション

注意事項

  • 多数のインスタンスがあるとパフォーマンスに影響する可能性があります
  • 画像の背景読み込みには、慎重な最適化が必要です
  • アニメーション設定は、スムーズなUXに合わせて調整する必要があります
  • 限定された組み込みアクセシビリティ機能
  • 静的コンテンツのみには適していません

元の README

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

Expansion card

Open Source Love

This package provides an easy implementation of a Expansion type card where you can also add gif at the background.

How to use

import 'package:expansion_card/expansion_card.dart';


Center(
            child: ExpansionCard(
              background: Image.asset("assets/animations/sleep.gif"),
              title: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Header",
                      style: TextStyle(
                        fontFamily: 'BalooBhai',
                        fontSize: 30,
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      "Sub",
                      style: TextStyle(
                          fontFamily: 'BalooBhai', fontSize: 20, color: Colors.white),
                    ),
                  ],
                ),
              ),
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 7),
                  child: Text("Content goes over here !",
                      style: TextStyle(
                          fontFamily: 'BalooBhai',
                          fontSize: 20,
                          color: Colors.white)),
                )
              ],
            ));

Custom Usage

There are several options that allow for more control:

Properties Description
leading Define an action after slidding a button
background provide any image asset file (supports gif also)
onExpansionChanged When the tile starts expanding, this function is called with the value true. When the tile starts collapsing, this function is called with the value false.
trailing A widget to display instead of a rotating arrow icon
initiallyExpanded Specifies if the list tile is initially expanded (true) or collapsed (false, the default)


👍 Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

カテゴリー

カードと拡張タイル

ソースリポジトリ

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

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