任何人都可以告诉我如何在 flutter 中制作这个布局，因为我是 flutter 的新手，我被困在这个

Question

图片中标出的东西谁能告诉我怎么制作这种卡在flutter中。因为我是 flutter 的新手

Answer 1

当你想制作widgets的时候，一步步开始想，

所以在您所说的小部件中，父小部件将是白色容器，其边框周围有阴影以创建浮动行为。

在此容器中，您需要基本列以便让小部件相互重叠。

此栏将有两个小部件，即上半身和下部文本，如此处所示

现在下面的只是文本，因此不需要任何额外的工作。

上半身左侧有一列，右侧有两个小部件，因此我们需要一个行，此行将包含此处显示的三个小部件

此行将包含：-

蓝色小部件，它是一个包含两个文本的列

绿色，这是一条线，您可以为此使用容器小部件

黄色小部件也是包含一个图标小部件和一个文本小部件的行

由于您是 Flutter 的新手，我建议您尝试自己创建代码并牢记这些步骤，如果遇到困难，您可以 post 这里的代码，我们会帮助您。

Answer 2

这是您的 UI

的代码

Container(
                        padding: const EdgeInsets.all(10),
                        margin: EdgeInsets.only(left: 20, right: 20),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 1,
                              blurRadius: 7,
                              offset: Offset(0, 3), // changes position of shadow
                            ),
                          ],
                        ),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Hello,',
                                      style: TextStyle(color: Colors.grey[700]),
                                    ),
                                    Text(
                                      'Test User',
                                      style: TextStyle(fontWeight: FontWeight.bold),
                                    ),
                                  ],
                                ),
                                Row(
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(right: 10),
                                      height: 40,
                                      width: 3,
                                      color: Colors.orange,
                                    ),
                                    TextButton.icon(
                                      style: ButtonStyle(
                                        foregroundColor: MaterialStateProperty.all(Colors.orange),
                                      ),
                                      onPressed: () {},
                                      icon: Icon(Icons.rice_bowl),
                                      label: Text('Show Card'),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            Text(
                                'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
                          ],
                        ),
                      ),