插件详情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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}