flutter - 如何在curcle头像中添加文字

Question

我想在我的圈子头像中添加文字[在此处输入图片描述][1]

[1]：https ://i.stack.imgur.com/knsdj.jpg与其他头像连续这样。

Answer 1

您可以创建一个由Column小部件组成的小型自定义小部件，其中包含一个圆形头像和一个标签，其间有一些间距，四周有填充，如下所示：

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

将其添加到Row小部件中，它们应该如下所示；

使用类似的东西：

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