How to put text under Boxdecoration Flutter

Question

Hello!

I’d like to do the following :

A list that shows people online, with their name down. Only I managed to do the following:

I would like to put a name underneath the image of the person. I couldn’t find out how to do it, and I tried to put a child: Text() into the container, but it didn’t work.

My code is like this:

Widget _listOnline() {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        Container(
          padding: EdgeInsets.only(left: 35),
          width: 80,
          height: 80,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: AssetImage("images/Rubio_Circle.png"),
            ),
          ),
        ),
      ],
    );
  }

Answer 1

All you need to do is use one Column with the widgets Container and Text.

I advise you to create a separate widget for the items, where you receive as parameter the text and the image you want... So you replace all the code of "Item 1" by the widget created, thus saving lines and leaving more organized.

   Widget _listOnline() {
        return ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column( /* Item 1 */
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: EdgeInsets.only(left: 35),
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage("images/Rubio_Circle.png"),
                    ),
                  ),
                ),
                Text("Nome aqui")
              ],
            ),
            Column( /* Item 2 */
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: EdgeInsets.only(left: 35),
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage("images/Rubio_Circle.png"),
                    ),
                  ),
                ),
                Text("Nome aqui")
              ],
            ),
          ],
        );
      }