How to add text to curcle avatar

Question

I want to add text to my circle avatar [enter image description here][1]

[1]: https://i.stack.imgur.com/knsdj.jpg like this in a row with other avatars.

Answer 1

You could create a small custom widget composed of a Column widget, containing a Circle avatar and a label below, with some spacing in between and padding all around, as in:

Padding(
   padding: const EdgeInsets.all(5),
   child: Column(
     mainAxisSize: MainAxisSize.min,
     children: [
       CircleAvatar(
         backgroundImage: NetworkImage(
                        "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
         radius: 50,
       ),
       SizedBox(height: 10),
       Container(
         width: 80,
         child: Text('Label for Avatar #$index', textAlign: TextAlign.center)
       )
    ]
  )
)

Add it to a Row widget and they should look like this;

Using something like:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: List.generate(
    5, (index) {
        // ... widget code here
    }
  )
)