how to display data from json api using flutter expansiontile

How to Display Data from JSON API Using Flutter ExpansionTile#

If you are building a Flutter app that needs to display data from a JSON API, using the ExpansionTile widget is a great option. The ExpansionTile widget can be used to create an expandable list, which is perfect for displaying data from a JSON API. In this article, we will discuss how to use the ExpansionTile widget to display data from a JSON API in a Flutter app.

Step 1: Fetch Data from JSON API#

The first step in displaying data from a JSON API in a Flutter app is to fetch the data. You can use the http package in Flutter to make API calls. Here is an example of fetching data from a JSON API:

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<dynamic>> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode != 200) {
    throw Exception('Failed to load data');
  }
  final data = jsonDecode(response.body);
  return data;
}

Step 2: Create ExpansionTile Widget#

After fetching the data, the next step is to create the ExpansionTile widget. The ExpansionTile widget has two main properties: title and children. The title property is a widget that will be displayed when the ExpansionTile is collapsed, while the children property is a list of widgets that will be displayed when the ExpansionTile is expanded.

Here is an example of creating an ExpansionTile widget:

ExpansionTile(
  title: Text('Title'),
  children: [
    Text('Child 1'),
    Text('Child 2'),
  ],
)

Step 3: Populate ExpansionTile with Data#

Now that we have fetched the data and created the ExpansionTile widget, the next step is to populate the ExpansionTile with data from the JSON API. We can do this by mapping over the data and creating a list of ExpansionTile widgets.

Here is an example of populating the ExpansionTile with data:

FutureBuilder<List<dynamic>>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
    if (!snapshot.hasData) {
      return CircularProgressIndicator();
    }
    return ListView(
      children: snapshot.data!.map((data) {
        return ExpansionTile(
          title: Text(data['title']),
          children: [
            Text(data['description']),
          ],
        );
      }).toList(),
    );
  },
)

In this example, we are using the FutureBuilder widget to fetch the data asynchronously. Inside the builder property of the FutureBuilder widget, we are checking if the snapshot has data. If it doesn't have data, we are displaying a CircularProgressIndicator. If it has data, we are creating a ListView widget and mapping over the data to create ExpansionTile widgets.

Conclusion#

Using the ExpansionTile widget is a great way to display data from a JSON API in a Flutter app. By following the steps outlined in this article, you should be able to fetch data from a JSON API and display it using ExpansionTile.