如何在颤振上创建这样的卡片？答案

【问题标题】：how to create card like this on flutter?如何在颤振上创建这样的卡片？
【发布时间】：2020-09-28 06:24:58
【问题描述】：

请大家帮帮我，我正在尝试制作这张卡片，但我无法制作它。

我正在分享我的代码和输出。我是 Flutter 和 Dart 语言的新手。

类评论扩展 StatefulWidget { 审查（{ 钥匙钥匙， }) : 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,
          ),
        ],
      ),
    );
  }
}

我正在尝试制作这张卡片，这是我的代码和输出。这对我来说是复杂的 UI，我正在学习颤振和飞镖语言。

【问题讨论】：

我正在更新我的问题

标签： android flutter dart flutter-web dart-pub

【解决方案1】：

这很简单，你基本上可以只使用一个列作为父列，然后你可以在顶部和底部添加两行，顶部的航班标题和底部的详细信息。现在中间部分是您使用步进器小部件创建动态数据的地方。如果您有疑问，请告诉我。

【讨论】：

欢迎您，祝您编码愉快。