how to create card like this on flutter?

Question

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.

Answer 1

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.