Dynamic ExpansionTile | Create Expansion List with Dynamic Data

Published December 31, 2020

Flutter provided ExpansionTile widget to make expand collapse views on the fly. By using ExpanstionTile widget we can make dynamic expandable Listview in Flutter.

In my previous example Create Expandable Listview with static data. In this post, we are going to create a Dynamic Expandable Listview by using the ExpanstionTile widget.

Let's get started

We already know how to work with ExpansionTile widget and ExpanstionPanelList and ExpansionPanel.

In this example the dynamic data we are getting from the server and parse it to list data and applying on the listview.

To fetch the data from the server by

_responseFuture = http.get('https://www.rrtutors.com/uploads/myproducts.json');

This request is done under FutureBuilder widget

FutureBuilder(
  future: _responseFuture,
  builder: (BuildContext context, AsyncSnapshot<http.Response> response) {
    if (!response.hasData) {
      return const Center(
        child: const Text('Loading...'),
      );
    } else if (response.data.statusCode != 200) {
      return const Center(
        child: const Text('Error loading data'),
      );
    } else {
      List<dynamic> json=jsonDecode(response.data.body);

      return new MyExpansionTileList(json);
    }
  },
)

When we get the response from the server we are passing data to MyExpansionTileList widget. the class will be like below

class MyExpansionTileList extends StatelessWidget {
  final List<dynamic> elementList;

  MyExpansionTileList(this.elementList);

  List<Widget> _getChildren() {
    List<Widget> children = [];
    elementList.forEach((element) {
      children.add(
        new MyExpansionTile(element['name'], element['description'], element['image']),
      );
    });
    return children;
  }

  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: _getChildren(),
    );
  }
}

To show the Data of the List will be done by below code

ExpansionTile(

  title: new Text(widget.name,style: TextStyle(fontSize: 20,color: Colors.indigo)),
  children: <Widget>[
     Card(
       elevation: 10,
       shadowColor: Colors.red,
       child: Column(
         children: [
           Divider(height: 5,color: Colors.black,thickness: 1,),
           SizedBox(height: 5,),
           Image.network(widget.image,height: 180,fit:BoxFit.fitWidth ,width: double.infinity,),
           ListTile(
            dense: true,
            title: new Text(widget.description,style: TextStyle(fontSize: 20,color: Colors.deepOrange),),
    ),
         ],
       ),
     )
  ],
)

Complete Dynamic Expansion/Collapse view with ExpanstionTile widget Example

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
class DynamicExpansionTile extends StatefulWidget {
  @override
  _DynamicExpansionTileState createState() => new _DynamicExpansionTileState();
}

class _DynamicExpansionTileState extends State<DynamicExpansionTile> {
  Future<http.Response> _responseFuture;

  @override
  void initState() {
    super.initState();
    _responseFuture = http.get('https://www.rrtutors.com/uploads/myproducts.json');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: new AppBar(
        title: new Text('ExpansionTile Test'),
      ),
      body: new FutureBuilder(
        future: _responseFuture,
        builder: (BuildContext context, AsyncSnapshot<http.Response> response) {
          if (!response.hasData) {
            return const Center(
              child: const Text('Loading...'),
            );
          } else if (response.data.statusCode != 200) {
            return const Center(
              child: const Text('Error loading data'),
            );
          } else {
            List<dynamic> json=jsonDecode(response.data.body);

            return new MyExpansionTileList(json);
          }
        },
      ),
    );
  }
}

class MyExpansionTileList extends StatelessWidget {
  final List<dynamic> elementList;

  MyExpansionTileList(this.elementList);

  List<Widget> _getChildren() {
    List<Widget> children = [];
    elementList.forEach((element) {
      children.add(
        new MyExpansionTile(element['name'], element['description'], element['image']),
      );
    });
    return children;
  }

  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: _getChildren(),
    );
  }
}

class MyExpansionTile extends StatefulWidget {
  final String description;
  final String name;
  final String image;
  MyExpansionTile(this.name,this.description,this.image);
  @override
  State createState() => new MyExpansionTileState();
}

class MyExpansionTileState extends State<MyExpansionTile> {

  //Future<http.Response> _responseFuture;

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {

    return Card(
      child: new ExpansionTile(

        title: new Text(widget.name,style: TextStyle(fontSize: 20,color: Colors.indigo)),
        children: <Widget>[
           Card(
             elevation: 10,
             shadowColor: Colors.red,
             child: Column(
               children: [
                 Divider(height: 5,color: Colors.black,thickness: 1,),
                 SizedBox(height: 5,),
                 Image.network(widget.image,height: 180,fit:BoxFit.fitWidth ,width: double.infinity,),
                 ListTile(
                  dense: true,
                  title: new Text(widget.description,style: TextStyle(fontSize: 20,color: Colors.deepOrange),),
          ),
               ],
             ),
           )
        ],
      ),
    );
  }
}

Article Contributed By :

4922 Views

Dynamic ExpansionTile | Create Expansion List with Dynamic Data

Subscribe For Daily Updates