CODEWITHSUNDEEP
flutterflutter-layout
Sulav Parajuli
Sulav Parajuli

Reputation: 213

How to add icon below CircularAvatar in Flutter?

Look at the plus

How can achieve that plus icon as same as the image above. I tried but am not able.

My code till now i am stucked here! have no idea how to add plus there!

 Widget _circleCard(image, name) {
    double radius = 32;
    return Padding(
      padding: const EdgeInsets.only(left: 5, right: 5),
      child: Column(
        children: [
          CircleAvatar(
            radius: radius + 4,
            backgroundColor: Colors.deepOrange,
            child: CircleAvatar(
              radius: radius + 2,
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: radius,
                backgroundImage: AssetImage('assets/$image'),
              ),
            ),
          ),
          Text(name)
        ],
      ),
    );
  }

plss help beginner me! Thanks

Upvotes: 0

Views: 368

Answers (1)

Jim
Jim

Reputation: 7601

Use Stack widget:

 Widget _circleCard(image, name) {
    double radius = 32;
    return Padding(
      padding: const EdgeInsets.only(left: 5, right: 5),
      child: Column(
        children: [
          Stack(
            children: [
          CircleAvatar(
            radius: radius + 4,
            backgroundColor: Colors.deepOrange,
            child: CircleAvatar(
              radius: radius + 2,
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: radius,
                backgroundImage: AssetImage('assets/$image'),
              ),
            ),
          ),
          Positioned(
            right: 0.0,
            bottom: 0.0,
            child: Icon(Icons.add),
          ),
            ],
          ),
          Text(name)
        ],
      ),
    );
  }

Upvotes: 4

Related Questions