Flutter ExpansionTile from json - flutter

Question

I have a flutter app that displays a list of users from a RESTapi in a list view. However I would like to show the list of users in an expansion tile so as to show more details about them. Here is the method for fetching the data:
final String apiURL = 'https://jsonplaceholder.typicode.com/users';
Future<List<Users>> fetchJSONData() async {
var jsonResponse = await http.get(Uri.parse(apiURL));
if (jsonResponse.statusCode == 200) {
final jsonItems =
json.decode(jsonResponse.body).cast<Map<String, dynamic>>();
List<Users> usersList = jsonItems.map<Users>((json) {
return Users.fromJson(json);
}).toList();
return usersList;
} else {
throw Exception('Failed to load data from internet');
}
}
This is the code used to display the list of users:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Customer List'),
backgroundColor: Theme.of(context).accentColor,
),
body: _buildExpanded());
}
Widget _showListTile() {
return FutureBuilder<List<Users>>(
future: fetchJSONData(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
return ListView(
children: snapshot.data
.map(
(user) => Slidable(
actionPane: SlidableScrollActionPane(),
actions: <Widget>[
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () => print('Archiving'),
),
IconSlideAction(
caption: 'Share',
color: Colors.green,
icon: Icons.share,
onTap: () => print('Share'),
)
],
actionExtentRatio: 1 / 5,
child: ListTile(
title: Text(user.name),
onTap: () {
print(user.name);
},
subtitle: Text(user.phoneNumber),
leading: CircleAvatar(
backgroundColor: Colors.green,
child: Text(user.name[0],
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
)),
),
),
secondaryActions: <Widget>[
IconSlideAction(
caption: 'More',
color: Colors.black45,
icon: Icons.more_horiz,
onTap: () => print('More'),
),
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () => print('Delete'),
),
],
),
)
.toList(),
);
},
);
}
What do I need to do to implement an expansion tile is this app?

Answer 1

For Example
ExpansionTile(
title: Text(user.name),
subtitle: Text(user.phoneNumber),
leading: CircleAvatar(
backgroundColor: Colors.green,
child: Text(user.name[0],
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
)),
),
children: [
Text(
"${user.email}",
style: TextStyle(fontSize: 18),
),
Text(
"${user.address}",
style: TextStyle(fontSize: 18),
),
// ...
// other information you want to show
])
OR you can push other page to show detail.