Expandable ListView inFlutter

Many times when we create our applications on Android, iOS, an application in general, we are interested in creating a multi-level list or a nested list, that is, having the list, if we click or touch it it expands and another list appears or at least , more information, this is somewhat complicated to create if we use native Android or iOS but with Flutter we are in luck and we have a widget that allows us to do this behavior.

The Expandable ListView is a very interesting and useful Flutter widget in many cases since it allows you to create drop-down lists with hidden content that is shown when you click on it, it's that simple.

This functionality is especially useful when you need to display additional information in a list without taking up too much screen space.

Getting started with the Exandable ListView in Flutter

The Expandable ListView is used in conjunction with the ListView widget, which is responsible for displaying the list items. Using the Expandable ListView, we can hide or show additional content when clicking or tapping on a list item.

One of the most notable features of the Expandable ListView is its ability to expand and contract in an animated manner. This creates an engaging user experience and improves the usability of the app.

To implement the Expandable ListView, some simple steps must be followed. First, we create a list of elements that we want to display in our application. Next, we use the ListView.builder widget to build the list and the Expandable ListView.builder widget to add the drop-down functionality.

Inside the Expandable ListView.builder widget, we define how each list item will behave when expanded or collapsed. We can customize the additional content that will be displayed when expanded, such as images, text or even other widgets.

In addition to the basic expand and collapse functionality, the Expandable ListView also offers customization options. We can adjust the appearance of the headers and icons used to indicate the status of each list item.

The Expandable ListView in Flutter is a powerful tool for creating dynamic and attractive user interfaces. It allows developers to effectively display additional information in a list without overwhelming the user with too much information at once.

Let's see an example

ExpansionTile(
  title: Text('Título del elemento'),
  children: <Widget>[
    ListTile(
      title: Text('Element 1'),
    ),
    ListTile(
      title: Text('Element 2'),
    ),
    ListTile(
      title: Text('Element 3'),
    ),
  ],
)

The ExpansionTile has similar features to the ListTile such as the title, subtitle, you can use the help option of VSC or Android Studio to see more information.

Here I give you another example in which I show how to create a listing listing which was the original objective of this post:

ListView.builder(
          shrinkWrap: true,
          itemCount: widget.tutorialModel.tutorialSectionsModel.length,
          itemBuilder: (context, index) {
            return ExpansionTile(
              title: Text('TEXT'),
              subtitle: Text('TEXT'),
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: 10,
                  itemBuilder: (context, index2) {
                    return ListTile(
                      title: Row(
                        children: [
                          Checkbox(
                            value: true,
                            onChanged: (value) {},
                          ),***
                    );
                  },
                )
              ],
            );
          },
        )

As you can see, since the ExpansionTile receives a children or set of widgets, we can place a column and another Listview as a single element and with this, we have a Listview of Listview in Flutter.

Lista

Flutter

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy