folding_cell

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget simples do Flutter que permite animações suaves de dobrar e desdobrar para componentes semelhantes a cartões. Ao fornecer um frontWidget e um innerWidget, os usuários podem criar células interativas expansíveis ideais para seções de conteúdo colapsáveis. O pacote oferece suporte a múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, tornando-o versátil para aplicativos multiplataforma. É leve e fácil de integrar, focando em transições de UI limpas sem configuração complexa.

Casos de uso

Criando cartões de perfil expansíveis
Construindo seções interativas de Perguntas Frequentes
Projetando listas de tarefas colapsáveis
Implementando detalhes animados do produto
Desenvolvendo painéis de navegação responsivos

Principais recursos

Animações suaves de dobrar/desdobrar
Suporte para widgets personalizados frontais e internos
Compatibilidade multiplataforma
Configuração mínima necessária
Leve e performático

Indicado para

Interfaces simples expansíveis
Interfaces baseadas em cartões
Designs com foco em dispositivos móveis
Prototipagem de layouts interativos
Aplicativos que precisam de animações sutis

Considerações

Personalização limitada além do dobramento básico
Não adequado para animações aninhadas complexas
Pode exigir estilos adicionais para visuais avançados
Melhor para dobradura de nível único apenas
O desempenho pode variar com widgets internos pesados

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Examples

example project contains these two demos

Demo 1 - FoldingCell inside Container

alt tag

Demo 2 - FoldingCell inside ListView

alt tag

Changelog

Check Changelog for updates

Bugs/Requests

Reporting issues and requests for new features are always welcome.

Buscar pacotes, repositórios e categorias de apps

Instalar pacote