颤振布局与圆形图像图标

 收藏

I am a web dev in MS stack trying flutter for a personal project of mine. I want to create a layout like in the below URL in the meeve app with circular images with text below the image button/icon. https://www.thedroidsonroids.com/blog/apps-made-with-flutter#meeve I tried the layout given in the example on flutter docs below but it is not what I am looking for and I am not able to re purpose this for my case. https://flutter.dev/docs/cookbook/lists/grid-lists

在这方面的任何线索,表示赞赏。

回复
  • D_G 回复

    enter image description here

    You can use CircleAvatar in a Column.

    @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"),
            ],
          ),
        ),
      );
    }