Flutter Tutorials

Flutter app development tutorials


flutter – How to use 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.grey),
        home: const MyHomePage()
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _index0Expanded = false;
  bool _index1Expanded = false;

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

  bodyContent() {
    return SingleChildScrollView(
      child: ExpansionPanelList(
        animationDuration: const Duration(milliseconds: 600),
        children: [
          ExpansionPanel(
            headerBuilder: (context, isExpanded) {
              return const ListTile(title: Text("Green"));
            },
            body:ListTile(
              title: const Text("I am green color."),
              tileColor: Colors.green.shade200,
              contentPadding: const EdgeInsets.all(32),
            ),
            isExpanded: _index0Expanded,
            canTapOnHeader: true,
          ),
          ExpansionPanel(
            headerBuilder: (context, isExpanded) {
              return const ListTile(title: Text("Red"));
            },
            body:ListTile(
              title: const Text("I am red color."),
              tileColor: Colors.red.shade200,
              contentPadding: const EdgeInsets.all(32),
            ),
            isExpanded: _index1Expanded,
            canTapOnHeader: true,
          ),
        ],
        dividerColor: Colors.grey,
        expansionCallback: (panelIndex, isExpanded) {
          setState(() {
            if(panelIndex == 0){ _index0Expanded = !_index0Expanded;}
            if(panelIndex == 1){_index1Expanded = !_index1Expanded;}
          });
        },
      ),
    ) ;
  }
}

More flutter tutorials



About Me

Flutter Developer

Design a site like this with WordPress.com
Get started