套件詳情v1.0.2

folding_cell

簡單的摺疊單元格組件，傳入 frontWidget 和 innerWidget 以實現摺疊和展開。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 745
喜歡數: 132
Pub 分數: 150

安裝套件

flutter pub add folding_cell

套件介紹

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

一個簡單的 Flutter 小部件，可為類似卡片的組件啟用流暢的摺疊與展開動畫。透過提供 frontWidget 和 innerWidget，使用者可以建立互動式可擴展單元格，非常適合用於可折疊內容區塊。此套件支援多個平台，包括 Android、iOS、Web、macOS、Windows 與 Linux，讓跨平台應用更具彈性。輕量且易於整合，專注於乾淨的 UI 過渡，無需複雜設定。

適用情境

建立可擴展的個人資料卡片
建構互動式常見問題區塊
設計可摺疊的任務清單
實現動畫產品詳情
開發響應式導航抽屜

主要特色

流暢的摺疊/展開動畫
對自訂前部和內部組件的支援
跨平台相容性
所需最小設定
輕量且高效能

適合對象

簡單的可擴展UI
基於卡片的介面
以行動裝置為首的設計
原型設計互動佈局
需要微妙動畫的應用程式

使用建議

超出基本摺疊之外的自訂功能有限
不適合複雜的嵌套動畫
可能需要額外的樣式才能實現高級視覺效果
僅適用於單層摺疊
效能可能會因內部小部件較多而有所差異

原始 README

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

Simple FoldingCell widget

Simple folding cell widget, pass frontWidget and innerWidget to fold and unfold.

Installation

Add dependency in pubspec.yaml:

dependencies:
  folding_cell: "^1.0.2"

Import in your project:

import 'package:folding_cell/folding_cell.dart';

Basic usage

class FoldingCellSimpleDemo extends StatelessWidget {
  final _foldingCellKey = GlobalKey<SimpleFoldingCellState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFF2e282a),
      alignment: Alignment.topCenter,
      child: SimpleFoldingCell.create(
        key: _foldingCellKey,
        frontWidget: _buildFrontWidget(),
        innerWidget: _buildInnerWidget(),
        cellSize: Size(MediaQuery.of(context).size.width, 140),
        padding: EdgeInsets.all(15),
        animationDuration: Duration(milliseconds: 300),
        borderRadius: 10,
        onOpen: () => print('cell opened'),
        onClose: () => print('cell closed'),
      ),
    );
  }

  Widget _buildFrontWidget() {
    return Container(
      color: Color(0xFFffcd3c),
      alignment: Alignment.center,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(
              "CARD TITLE",
              style: GoogleFonts.aldrich(
                color: Color(0xFF2e282a),
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Positioned(
            right: 10,
            bottom: 10,
            child: TextButton(
              onPressed: () => _foldingCellKey?.currentState?.toggleFold(),
              child: Text(
                "OPEN",
              ),
              style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                minimumSize: Size(80, 40),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildInnerWidget() {
    return Container(
      color: Color(0xFFecf2f9),
      padding: EdgeInsets.only(top: 10),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Text(
              "CARD TITLE",
              style: GoogleFonts.aldrich(
                color: Color(0xFF2e282a),
                fontSize: 22.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Text(
              "CARD DETAIL",
              style: GoogleFonts.aldrich(
                color: Color(0xFF2e282a),
                fontSize: 40.0,
              ),
            ),
          ),
          Positioned(
            right: 10,
            bottom: 10,
            child: TextButton(
              onPressed: () => _foldingCellKey?.currentState?.toggleFold(),
              child: Text(
                "Close",
              ),
              style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                minimumSize: Size(80, 40),
              ),
            ),
          ),
        ],
      ),
    );
  }
}