CODEWITHSUNDEEP
flutterflutter-layout
FlutterEnigma
FlutterEnigma

Reputation: 3

Flutter layout with circular image icons

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

Any leads in this respect is appreciated.

Upvotes: 0

Views: 607

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267404

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

Upvotes: 3

Related Questions