Create Listview dynamically in flutter - dart

Question

class _SearchState extends State<Search> {
#override
Widget build(BuildContext context) {
widget.id;
return new Scaffold(
appBar: new AppBar(
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.exit_to_app),
onPressed: _getTicketDetails
)
],
centerTitle: true,
title: new Text
("TicketsDetails", style: const TextStyle(
fontFamily: 'Poppins'
,),),),
);
}
_getTicketDetails() async {
print(widget.id);
var userDetails = {};
final response = await http.get(
"https:...", headers: {
HttpHeaders.AUTHORIZATION:
"...
});
List returnTicketDetails = json.decode(response.body);
print(returnTicketDetails);
for (var i = 0; i < (returnTicketDetails?.length ?? 0); i++) {
final ticketresponse = await http.get(
"..${returnTicketDetails[i]["user_id"]
.toString()}", headers: {
HttpHeaders.AUTHORIZATION:
"...
});
userDetails[returnTicketDetails[i]["user_id"]] =
json.decode(ticketresponse.body);
}
print(userDetails);
}
Hi there! In the console the output I get by printing (userDetails) is: {513549601: {first_name: Test, last_name: Account, profile_image: tempURL. However, I would like to create a Listview dynamically with: userDetails[user_id][first_name] userDetails[user_id][last_name] and so on... But my concern is, where am I suppose to implement the Listview? As I already have a Widget build used at the very top.

Answer 1

Try this!
Let's assume you got the data from API say userdetails list. Then you just need an ListView.builder() and Custom UserWidget/ListTile .
The Result :
The Code :
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new Home()));
}
class Home extends StatelessWidget {
List userdetails = [
{
"first_name": "FLUTTER",
"last_name": "AWESOME",
"image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
},
{
"first_name": "ABC",
"last_name": "XYZ",
"image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
},
{
"first_name": "FLUTTER",
"last_name": "AWESOME",
"image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
},
{
"first_name": "ABC",
"last_name": "XYZ",
"image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
},
{
"first_name": "FLUTTER",
"last_name": "AWESOME",
"image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
},
{
"first_name": "ABC",
"last_name": "XYZ",
"image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
},
{
"first_name": "FLUTTER",
"last_name": "AWESOME",
"image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
},
{
"first_name": "ABC",
"last_name": "XYZ",
"image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
},
];
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
appBar: new AppBar(
title: new Text("Dynamic List"),
backgroundColor: Colors.redAccent,
),
body: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new UserWidget(
firstName: userdetails[index]['first_name'],
lastName: userdetails[index]['last_name'],
imageURL: userdetails[index]['image_url'],
);
},
itemCount: userdetails.length,
),
);
}
}
class UserWidget extends StatelessWidget {
final String firstName;
final String lastName;
final String imageURL;
const UserWidget({Key key, this.firstName, this.lastName, this.imageURL}) : super(key: key);
#override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.white70),
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new ListTile(
leading: new FadeInImage(
placeholder: new AssetImage('assets/me.jpg'),
image: new NetworkImage(imageURL),
),
title: new Text("First Name : " + firstName),
subtitle: new Text("Last Name : " + lastName),
),
);
}
}
Also, check out FadeInImage it gives a placeholder[shows local asset till the image load] for network image.