Dynamic ExpansionTile | Create Expansion List with Dynamic Data
Published December 31, 2020Flutter 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 This request is done under FutureBuilder widget When we get the response from the server we are passing data to MyExpansionTileList widget. the class will be like below To show the Data of the List will be done by below code Complete Dynamic Expansion/Collapse view with ExpanstionTile widget Example 
_responseFuture = http.get('https://www.rrtutors.com/uploads/myproducts.json');
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(),
);
}
}
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),),
),
],
),
)
],
)
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 :
|
|
|
|
|
3421 Views |
|