Paketdetailsv1.0.2

folding_cell

Einfaches Faltzellen-Widget, übergeben Sie frontWidget und innerWidget, um zu falten und aufzufalten.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 777
Likes: 132
Pub-Punkte: 150

Paket installieren

flutter pub add folding_cell

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein einfaches Flutter-Widget, das glatte Falten- und Entfaltungsanimationen für kartenartige Komponenten ermöglicht. Durch die Bereitstellung eines frontWidget und eines innerWidget können Benutzer interaktive erweiterbare Zellen erstellen, die ideal für zusammenklappbare Inhaltsabschnitte sind. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und ist somit vielseitig für plattformübergreifende Anwendungen geeignet. Es ist leichtgewichtig und einfach zu integrieren und konzentriert sich auf saubere UI-Übergänge ohne komplizierte Einrichtung.

Anwendungsfälle

Erweiterbare Profilkarten erstellen
Interaktive FAQ-Bereiche erstellen
Entwurf von zusammenklappbaren Aufgabenlisten
Implementierung animierter Produktinformationen
Entwicklung von reaktiven Navigationsdrawern

Hauptmerkmale

Glatte Falten-/Entfalten-Animationen
Unterstützung für benutzerdefinierte Vorder- und Innenelemente
Plattformübergreifende Kompatibilität
Minimale Konfiguration erforderlich
Leichtgewichtig und leistungsstark

Geeignet für

Einfache erweiterbare Benutzeroberflächen
Kartenbasierte Schnittstellen
Mobile-first-Designs
Interaktive Layouts prototypisch erstellen
Apps, die subtile Animationen benötigen

Hinweise

Eingeschränkte Anpassung über die grundlegende Falz hinaus
Nicht geeignet für komplexe verschachtelte Animationen
Kann zusätzliche Styling für fortgeschrittene Visuals erfordern
Am besten für einstufige Falzung nur
Die Leistung kann bei vielen inneren Widgets variieren

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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