flutter - 谁能告诉我如何在颤动中制作这种布局，因为我是颤动的新手，我被困在这个

Question

图片中标记的东西可以让人知道如何制作这种类型的卡片。因为我是新来的

标签： flutterdartflutter-layoutflutter-dependencies

Answer 1

这是您的用户界面的代码

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'),
                          ],
                        ),
                      ),