easy_expandable 0.1.0

Wrap any widget so it smoothly expands and collapses when its header is tapped. Zero-boilerplate, controlled or uncontrolled, with lazy body building.

example/lib/main.dart

import 'package:easy_expandable/easy_expandable.dart';
import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'easy_expandable',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Zone 3: a multi-open group driven by the expand-all / collapse-all buttons.
  final ExpandableGroupController _multiController =
      ExpandableGroupController();

  @override
  void dispose() {
    _multiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('easy_expandable')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: <Widget>[
          // 1) SINGLE ---------------------------------------------------------
          const _SectionLabel('Single — one Expandable'),
          _Card(
            child: Expandable(
              header: (BuildContext context, bool isExpanded) =>
                  ExpandableHeader(
                leading: const Icon(Icons.widgets_outlined),
                title: const Text('Wrap anything'),
                isExpanded: isExpanded,
              ),
              child: const _Body(
                'A single expandable. Tap the header to open and close it.',
              ),
            ),
          ),

          const SizedBox(height: 24),

          // 2) ACCORDION ------------------------------------------------------
          const _SectionLabel('Accordion — open one, the rest close'),
          _Card(
            child: ExpandableGroup(
              initialExpandedIndexes: const <int>[0],
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(height: 1),
              children: <ExpandableGroupChild>[
                for (int i = 1; i <= 3; i++)
                  ExpandableGroupChild(
                    header: (BuildContext context, bool isExpanded) =>
                        ExpandableHeader(
                      leading: const Icon(Icons.folder_outlined),
                      title: Text('Section $i'),
                      isExpanded: isExpanded,
                    ),
                    body: _Body('Body of section $i.'),
                  ),
              ],
            ),
          ),

          const SizedBox(height: 24),

          // 3) MULTIPLE + BUTTONS ---------------------------------------------
          const _SectionLabel('Multiple — expand all / collapse all'),
          _Card(
            child: ExpandableGroup(
              controller: _multiController,
              allowMultiple: true,
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(height: 1),
              children: <ExpandableGroupChild>[
                for (int i = 1; i <= 3; i++)
                  ExpandableGroupChild(
                    header: (BuildContext context, bool isExpanded) =>
                        ExpandableHeader(
                      leading: const Icon(Icons.check_circle_outline),
                      title: Text('Item $i'),
                      isExpanded: isExpanded,
                    ),
                    body: _Body('Body of item $i.'),
                  ),
              ],
            ),
          ),
          const SizedBox(height: 12),
          Row(
            children: <Widget>[
              Expanded(
                child: FilledButton.tonal(
                  onPressed: _multiController.expandAll,
                  child: const Text('Expand all'),
                ),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: OutlinedButton(
                  onPressed: _multiController.collapseAll,
                  child: const Text('Collapse all'),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _Body extends StatelessWidget {
  const _Body(this.text);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
      child: Text(text),
    );
  }
}

class _Card extends StatelessWidget {
  const _Card({required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      margin: EdgeInsets.zero,
      child: child,
    );
  }
}

class _SectionLabel extends StatelessWidget {
  const _SectionLabel(this.text);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Text(text, style: Theme.of(context).textTheme.labelLarge),
    );
  }
}