Flutter app creates a list of expansion panels

original

https://medium.flutterdevs.com/expansionpanellist-in-flutter-48aa06f764e

refer to

• https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

text

Learn how to create a list of expansion panels in your Flutter app

In this article, we'll explore ExpansionPanelList In Flutter . We'll implement an extension panel list demo and learn how to customize its style with different properties in your Flutter app.

Expansion Panel List:

It's a substantial Flutter widget similar to a listView. It can have only expansion panels as children. In some cases, we may need to display a list where child elements can be expanded/collapsed to show/hide some detailed data. To display such a list flutter, a widget called ExapansionPanelList is provided.

In this list, each child element is an expansionpanel widget. In this list, we cannot use different widgets as child windows. We can handle state adjustments (expansion or collapse) of things with the help of the expsioncallback property.

Demo module:

This demo video shows how to extend a panel manifest in a Flutter. It shows how expanding the panel list will work in your Flutter app. It shows a list where children can expand/collapse to show/hide some details. It will show up on your device.

Constructor:

To use the ExpansionPanelList , the following constructor needs to be called:

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

Properties:

Some properties of ExpansionPanelList are as follows:

• > children: This property is used to extend the child elements of the panel List. Their layout is similar to [ListBody].
• > expansionCallback: This property is used for a callback called whenever an expand/collapse button is pressed. The arguments passed to the callback are the index of the panel that was pressed, and whether the panel is currently expanded.
• > animationDuration: This property is used when expanding or collapsing, we can observe some animations to happen within a certain period of time. We can change the duration by using the animationDuration property of the extension panel List. We just need to provide the duration value in microseconds, milliseconds or minutes.
• > expandedHeaderPadding: This property is used for padding around the panel header when expanded. By default, 16px of space is added vertically to the header (above and below) during expansion.
• > dividerColor: When [expsionpanel.isexpanded] is false, this property defines the color of the divider. If 'dividerColor' is empty, use [ DividerThemeData.color ]. If null, use [ThemeData.dividerColor].
• > elevation: This attribute is used to define the elevation of the [expsionpanel] when expanding. This uses [kElevationToShadow] to simulate shadows, it doesn't use the arbitrary height property of [Material]. By default, the elevation angle has a value of 2.

How to implement the code in the dart file:

You need to implement it in your code separately:

Create a new dart file named main.dart in the lib folder.

First, we will generate dummy data. We'll create a list <Map<String, dynamic>> and add the variable \_ items equal to generating a list. To 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 the ExpansionPanelList() widget. In this widget, we will add an elevation of 3, an expsioncallback index and isExpanded in parentheses. We will add the setState() method. In the method, we will add \_ items index 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 increase the animationDuration to 600 milliseconds. We will add child nodes because variable_items maps to the expansionpanel() widget. In this widget, we will add canTapOnHeader was true, backgroundColor, headerBuilder returns Container() widget. In this widget, we will add padding and text on its child properties. In the body, we'll add the Conatiner and its sub-properties, and we'll add the text. When we run the application, we should get the screen output like the screenshot below.

all code

 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(),
        ),
      ),
    );
  }
}

Epilogue

In this article, I have briefly explained the basic structure of ExpansionPanelList ; you can modify this code according to your choice. Here is a small introductory extension/panellist On User Interaction from my side that works using Flutter.

---

© Cat Brother

• WeChat ducafecat
• Blogducafecat.tech
• github
• bilibili