See attached snapshot. I have created such circle box through container in flutter. But I am seeking for widget. Do flutter have a widget for it?

Question

Hi. I have attached a snapshot. Can anyone tell me how I can get this circle image and below text in one widget ? Is there any such single widget in flutter ? Instead of using 3 widgets column, container and text widgets.

[![Attached Snapshot][1]] [1]: https://i.sstatic.net/TlLwK.png

Answer 1

you can add circular avtar to make like you picture

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

Answer 2

Try below code hope it solve your problem:

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

Your Screen like ->