flutter – ExpansionPanelList example

main.dart

import 'package:flutter/material.dart';

void main() {runApp(const MyApp());}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.amber),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Item> _colors = generateItems(Colors.primaries.length);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("ExpansionPanelList Example")
        ),
        body: bodyContent()
    );
  }

  bodyContent() {
    return SingleChildScrollView(
        child:ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _colors[index].isExpanded = !isExpanded;
            });
          },
          animationDuration: const Duration(microseconds: 600),
          children: _colors.map<ExpansionPanel>((Item item) {
            return ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                      title: Text("${item.materialColor.shade300}")
                  );
                },
                body: ListTile(
                    title: Text(
                        "Color Value : ${item.materialColor.shade300.value}"
                    ),
                    tileColor: item.materialColor.shade300,
                    contentPadding: const EdgeInsets.all(48)
                ),
                isExpanded: item.isExpanded,
                canTapOnHeader: true
            );
          }).toList(),
        )
    );
  }
}

class Item {
  MaterialColor materialColor;
  bool isExpanded = false;
  Item({ required this.materialColor });
}

List<Item> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return Item(materialColor: Colors.primaries[index]);
  });
}

More flutter tutorials

• flutter – How to create ExpansionPanelList
• flutter – How to use ExpansionPanel
• flutter – How to use SingleChildScrollView
• flutter – How to use ExpansionTile
• flutter – Stateful widget example
• flutter – Button with icon and text
• flutter – Floating action button position
• flutter – TextField border color
• flutter – TextField border padding
• flutter – TextField hint text color
• flutter – TextField counter
• flutter – TextField onChanged
• flutter – Hexadecimal color string
• flutter – SnackBar action
• flutter – Animated opacity