expansion_card

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

expansion_card 套件提供了一個可自訂的 Flutter 小工具，可實現帶有可選動畫圖像背景的可摺疊卡片。非常適合顯示可展開內容，例如常見問題、詳細資訊或互動區塊，支援流暢動畫及跨所有主要平台的響應式設計。開發者可依應用程式 UI 自訂卡片外觀、行為與過渡效果。此套件輕量且能順暢整合至現有的 Flutter 項目中。

適用情境

顯示常見問題部分
顯示詳細產品資訊
建立互動式摺疊面板
以表單形式展示分層內容
增強使用者入門流程

主要特色

可自訂的卡片樣式
動畫圖像背景
平滑展開/收合過渡
跨平台支援
與 Flutter 的輕鬆整合
可設定的動畫持續時間

適合對象

開發互動式 UI 的開發者
需要可展開內容區塊的應用
尋求動畫卡片組件的設計師
針對多個平台的專案
具有動態內容的UI密集型應用

使用建議

大量實例可能影響效能
影像背景載入需要仔細優化
動畫設定應調整以實現流暢的使用者體驗
有限的內建可存取性功能
不適用於僅靜態內容

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Expansion card

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

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

搜尋套件、儲存庫與 APP 分類

安裝套件