Guys pls help me I'm trying to make this card but I cant create this.
I'm sharing my code and output. I'm new in flutter and dart language.
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,
),
],
),
);
}
}
I'm trying to make this card and here is my code and output. it's complex UI for me and I'm learning flutter and dart language.
This is kind of simple you can basically just use a column as a parent and then you can add two row at top and bottom, flight title on top and the details on the bottom. And now the middle part is where you use the stepper widget creating dynamic data. Let me know when you have doubt.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.