flutter_custom_expansion_item_list.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample',
      home: MyScreen(),
    );
  }
}

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  final Set<int> expandedIndexSet = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
        padding: const EdgeInsets.all(16),
        itemCount: 20,
        separatorBuilder: (_, __) => SizedBox(height: 16),
        itemBuilder: (_, index) {
          final isExpanded = expandedIndexSet.contains(index);

          return ExpansionItem(
            isExpanded: isExpanded,
            index: index,
            onHeaderPress: () {
              setState(
                () {
                  if (isExpanded) {
                    expandedIndexSet.remove(index);
                  } else {
                    expandedIndexSet.add(index);
                  }
                },
              );
            },
          );
        },
      ),
    );
  }
}

class ExpansionItem extends StatelessWidget {
  final bool isExpanded;
  final int index;
  final VoidCallback onHeaderPress;

  ExpansionItem({
    this.isExpanded,
    this.index,
    this.onHeaderPress,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Material(
          color: Colors.grey,
          child: InkWell(
            onTap: onHeaderPress,
            child: SizedBox(
              height: 100,
              child: Row(
                children: [
                  Expanded(
                    child: Text('Header $index'),
                  ),
                  SizedBox(width: 8),
                  AnimatedRotation(
                    turns: isExpanded ? 0.5 : 0.0,
                    duration: kThemeAnimationDuration,
                    child: Icon(
                      Icons.expand_more,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        AnimatedCrossFade(
          firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
          secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
          sizeCurve: Curves.fastOutSlowIn,
          firstChild: Container(height: 0.0),
          secondChild: SizedBox(
            height: 200,
            child: Center(
              child: Text('Content $index'),
            ),
          ),
          crossFadeState:
              isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: kThemeAnimationDuration,
        ),
      ],
    );
  }
}