Flutterexperts

In this article, we will explore the ExpansionPanelList In Flutter. We will implement an expansion panel list demo program and learn how to customize its style with different properties in your flutter applications.

Table Of Contents::

Expansion Panel List

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

Expansion Panel List:

It is a material widget in flutter which is like listView. It can just have Expansion panels as children. In certain cases, we may need to show a list where the children can expand/collapse to show/hide some detailed data. To show such a list flutter gives a widget called ExapansionPanelList.

In this list, every child is an ExpansionPanel widget. We can’t utilize different widgets as children for this list. We can deal with the adjustment of state( Expansion or collapse ) of a thing with the assistance of ExpansionCallback property.

Demo Module :

This demo video shows how to create an expansion panel List in a flutter. It shows how the expansion panel List will work in your flutter applications. It shows a list where the children can expand/collapse to show/hide some detailed information. It will be shown on your device.

Constructor:

To utilize ExpansionPanelList, you need to call the constructor underneath:

const ExpansionPanelList({
  Key? key,
  this.children = const <ExpansionPanel>[],
  this.expansionCallback,
  this.animationDuration = kThemeAnimationDuration,
  this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding,
  this.dividerColor,
  this.elevation = 2,
})

Properties:

There are some properties of ExpansionPanelList are:

• > children: This property is used by the children of the expansion panel List. They are laid out similarly to [ListBody].
• > expansionCallback: This property is used to the callback that gets called whenever one of the expand/collapse buttons is pressed. The arguments passed to the callback are the index of the pressed panel and whether the panel is currently expanded or not.
• > animationDuration: This property is used while expanding or collapsing we can observe some animation take place for a certain period. We can change that duration by using the animationDuration property of the expansion panel List. We just have to provide Duration in either microseconds, milliseconds, or minutes as value.
• > expandedHeaderPadding: This property is used to the padding that surrounds the panel header when expanded. By default, 16px of space is added to the header vertically (above and below) during expansion.
• > dividerColor: This property is used to define the color for the divider when [ExpansionPanel.isExpanded] is false. If `dividerColor` is null, then [DividerThemeData.color] is used. If that is null, then [ThemeData.dividerColor] is used.
• > elevation: This property is used to define elevation for the [ExpansionPanel] while it’s expanded. This uses [kElevationToShadow] to simulate shadows, it does not use [Material]’s arbitrary elevation feature. By default, the value of elevation is 2.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we will generate dummy data. We will create a list <Map<String, dynamic>> and add variable _items equal to generating a list. In this list, we will add number, id, title, description, and isExpanded.

List<Map<String, dynamic>> _items = List.generate(
    10,
        (index) => {
      'id': index,
      'title': 'Item $index',
      'description':
      'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      'isExpanded': false
    });

In the body, we will add ExpansionPanelList() widget. In this widget, we will add elevation was three, expansionCallback was added index and isExpanded in the bracket. We will add setState() method. Inside the method, we will add _items[index][‘isExpanded’] equal not isExpanded.

ExpansionPanelList(
  elevation: 3,
  expansionCallback: (index, isExpanded) {
    setState(() {
      _items[index]['isExpanded'] = !isExpanded;
    });
  },
  animationDuration: Duration(milliseconds: 600),
  children: _items
      .map(
        (item) => ExpansionPanel(
      canTapOnHeader: true,
      backgroundColor:
      item['isExpanded'] == true ? Colors.cyan[100] : Colors.white,
      headerBuilder: (_, isExpanded) => Container(
          padding:
          EdgeInsets.symmetric(vertical: 15, horizontal: 30),
          child: Text(
            item['title'],
            style: TextStyle(fontSize: 20),
          )),
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
        child: Text(item['description']),
      ),
      isExpanded: item['isExpanded'],
    ),
  )
      .toList(),
),

We will add animationDuration was 600 milliseconds. We will add children as variable _items were mapped to the ExpansionPanel() widget. In this widget, we will add canTapOnHeader was true, backgroundColor, headerBuilder return the Container() widget. In this widget, we will add padding and on its child property, we will add text. In the body, we will add Conatiner and its child property, we will add text. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_expansion_panel_list/splash_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: Splash());
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Map<String, dynamic>> _items = List.generate(
      10,
          (index) => {
        'id': index,
        'title': 'Item $index',
        'description':
        'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        'isExpanded': false
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Flutter Expansion Panel List Demo'),
      ),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          elevation: 3,
          // Controlling the expansion behavior
          expansionCallback: (index, isExpanded) {
            setState(() {
              _items[index]['isExpanded'] = !isExpanded;
            });
          },
          animationDuration: Duration(milliseconds: 600),
          children: _items
              .map(
                (item) => ExpansionPanel(
              canTapOnHeader: true,
              backgroundColor:
              item['isExpanded'] == true ? Colors.cyan[100] : Colors.white,
              headerBuilder: (_, isExpanded) => Container(
                  padding:
                  EdgeInsets.symmetric(vertical: 15, horizontal: 30),
                  child: Text(
                    item['title'],
                    style: TextStyle(fontSize: 20),
                  )),
              body: Container(
                padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
                child: Text(item['description']),
              ),
              isExpanded: item['isExpanded'],
            ),
          )
              .toList(),
        ),
      ),
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of the ExpansionPanelList in a flutter; you can modify this code according to your choice. This was a small introduction to ExpansionPanelList On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the ExpansionPanelList in your flutter projects. We will show you what the ExpansionPanelList is?. Show constructor and properties of the ExpansionPanelListr. Make a demo program for working ExpansionPanelList, and it shows a list where the children can expand/collapse to show/hide some detailed information in your flutter application. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---