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);
}
你好!在控制台中,我通过打印获得的输出(userDetails)是:{513549601: {first_name: Test, last_name: Account, profile_image: tempURL
。但是,我想动态创建一个Listview
:userDetails[user_id][first_name] userDetails[user_id][last_name]
等等......但我担心的是,我想在哪里实施Listview
?因为我已经在顶部使用了Widget构建。
答案 0 :(得分:0)
试试这个!
假设您从API中获取了数据说用户详细信息列表。然后你只需要一个 ListView.builder()和Custom UserWidget / ListTile。
结果:
守则:
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),
),
);
}
}
另外,查看 FadeInImage ,它会为网络图像提供一个占位符[显示本地资产,直到图像加载]。