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 :
|
|
|
|
|
5932 Views |
|