带有圆形图像图标的 Flutter 布局

Question

我是 MS 堆栈中的 Web 开发人员，正在为我的个人项目尝试 flutter。我想在 meeve 应用程序中创建如下 URL 中的布局，其中包含圆形图像，图像按钮/图标下方有文本。 https://www.thedroidsonroids.com/blog/apps-made-with-flutter#meeve我尝试了下面关于 flutter 文档的示例中给出的布局，但这不是我想要的，我无法为我的案例重新设计它。 https://flutter.dev/docs/cookbook/lists/grid-lists

感谢任何这方面的线索。

Answer 1

---

您可以在 Column 中使用 CircleAvatar。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CircleAvatar(backgroundImage: AssetImage("assets/images/chocolate_pic.png"), radius: 40),
          SizedBox(height: 12),
          Text("Chocolate"),
        ],
      ),
    ),
  );
}