[英]how to create card like this on flutter?
伙计们请帮助我,我正在尝试制作这张卡片,但我无法制作它。
我正在分享我的代码和 output。 我是 flutter 和 dart 语言的新手。
class Review extends StatefulWidget { Review({ Key key, }): super(key: key);
@override
_ReviewState createState() => _ReviewState();
}
class _ReviewState extends State<Review> {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
dragStartBehavior: DragStartBehavior.down,
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
SizedBox(
height: 10,
),
ListTile(
leading: Image.asset("assets/japan.webp"),
title: Column(
children: [
Text("japan"),
Text(
"PR 211",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
),
],
),
),
ListTile(
leading: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("07:40 PM"),
Text(
"Web, Aug 12",
style: TextStyle(fontSize: 13),
),
],
),
title: Column(
children: [
Text("Manila"),
Text(
"MNL, Ninoy Aquino International Airport",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
],
),
),
ListTile(
leading: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("08:40 AM"),
Text(
"thu, Aug 13",
style: TextStyle(fontSize: 13),
),
],
),
title: Column(
children: [
Text("Sydney"),
Text(
"SYD, Kingsford Smith Airport",
style: TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Coach",
style: TextStyle(fontSize: 10),
overflow: TextOverflow.ellipsis,
softWrap: true,
),
VerticalDivider(
thickness: 2,
),
Text(
"333",
style: TextStyle(fontSize: 10),
overflow: TextOverflow.ellipsis,
),
Icon(
Icons.tv,
size: 10,
),
Icon(
Icons.wifi,
size: 10,
),
Icon(
Icons.power,
size: 10,
),
Icon(
Icons.local_dining,
size: 10,
),
],
)
],
),
);
},
itemCount: 3,
),
],
),
);
}
}
我正在尝试制作这张卡,这是我的代码和 output。 这对我来说是复杂的 UI,我正在学习 flutter 和 dart 语言。
这很简单,您基本上可以只使用一列作为父列,然后您可以在顶部和底部添加两行,顶部的航班标题和底部的详细信息。 现在中间部分是您使用步进器小部件创建动态数据的地方。 当您有疑问时请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.