flutter – How to create ExpansionPanelList

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.green),
        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<MaterialColor> _list = Colors.primaries.toList();
  final List<bool> _expandedList = List.filled(
      Colors.primaries.length,false
  );

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

  bodyContent() {
    return SingleChildScrollView(
        child:ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                _expandedList[index] = !isExpanded;
              });
            },
            animationDuration: const Duration(microseconds: 600),
            children: _list.map<ExpansionPanel>((MaterialColor item) {
              var itemIndex = _list.indexOf(item);
              return ExpansionPanel(
                  headerBuilder: (BuildContext context, bool isExpanded) {
                    return ListTile(
                        title: Text(
                            "${itemIndex+1}. Color : ${item.shade200.value}"
                        )
                    );
                  },
                  body: ListTile(
                      title: Text("Body ${item.shade200.value}"),
                      tileColor: item.shade200,
                      contentPadding: const EdgeInsets.all(32)
                  ),
                  isExpanded: _expandedList[itemIndex],
                  canTapOnHeader: true
              );
            }).toList()
        )
    );
  }
}

More flutter tutorials

• flutter – Function multiple parameters
• flutter – How to create custom function
• flutter – Table cell vertical alignment
• flutter – Table border
• flutter – Table symmetric border
• flutter – Table horizontal inside border
• flutter – Table row decoration
• flutter – For loop inside widget children
• flutter – ExpansionPanelList example
• flutter – How to use ExpansionPanel
• flutter – How to use SingleChildScrollView
• flutter – How to use ExpansionTile
• flutter – ExpansionTile divider
• flutter – ExpansionTile change icon
• flutter – ExpansionTile arrow position