Expansion Card

Open Source Love

A customizable Flutter expansion card with support for an optional image or GIF background that expands with the card.

Preview

Expansion Card preview

Usage

import 'package:expansion_card/expansion_card.dart';

Center(
  child: ExpansionCard(
    gif: 'assets/animations/sleep.gif',
    title: const Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Header',
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
        Text(
          'Sub',
          style: TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ],
    ),
    children: const <Widget>[
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 7),
        child: Text(
          'Content goes over here!',
          style: TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
);

Properties

Property Description
leading Widget shown before the title.
gif Asset path for an image or GIF shown behind the card content.
backgroundColor Background color shown behind the expanded content.
onExpansionChanged Callback fired when the card expands or collapses.
trailing Widget shown instead of the rotating expansion arrow.
initiallyExpanded Whether the card starts expanded.
color Active color used for the title and icon while expanded.
expansionArrowColor Color of the default expansion arrow.
topMargin Top spacing applied before the title area.

Publishing Notes

Version 1.0.1 updates the package for Dart 3 compatibility and modern Flutter SDK constraints.

Libraries

expansion_card