请参阅随附的快照。我已经通过 flutter 中的容器创建了这样的圆框。但我正在寻找小部件。 Flutter 有它的小部件吗？

Question

你好。我附上了快照。谁能告诉我如何在一个小部件中获取此圆形图像和下方文本？ flutter 中有这样的单个小部件吗？而不是使用 3 个小部件列、容器和文本小部件。

[![附加快照][1]] [1]: https://i.stack.imgur.com/TlLwK.png

Answer 1

试试下面的代码希望它能解决你的问题：

ButtonBar(
              alignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Icon(Icons.check, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Nike'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Icon(Icons.add, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Add'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Icon(Icons.edit, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Edit'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: Icon(Icons.menu, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Menu'),
                    ),
                  ],
                ),
              ],
            ),

你的屏幕喜欢 ->

Answer 2

你可以添加圆形头像制作喜欢你的头像

             Container(
                  padding: EdgeInsets.only(left: 15, right: 15, top: 10),
                  child: Row(
                    children: [
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),