CODEWITHSUNDEEP
flutterfrontendflutter-layout
Nzo
Nzo

Reputation: 27

How to make an Icon overlay over an image

I'm new to flutter and not that experienced when it comes to programming in general. So I'm trying to do something like this

enter image description here

But I just can't seem to do it, I tried align properties, padding to make it move left and right, I also tried stacks but I don't have any idea how to do it.

This is my code for the image

Widget buildImage() {
return Padding(
    padding: EdgeInsets.only(right: 10, left: 10, top: 20),
    child: Align(
      alignment: Alignment.bottomLeft,
      child: Container(
        height: 100,
        width: 130,
        decoration: BoxDecoration(
          image: new DecorationImage(
            image: new AssetImage(
              "assets/images/profile-image.jpeg",
            ),
            fit: BoxFit.cover,
          ),
          shape: BoxShape.circle,
          border: Border.all(
            color: Colors.white,
            width: 5.0,
          ),
        ),
      ),
    ));
 }

This is my current progress

enter image description here

I would appreciate any help.

Upvotes: 0

Views: 1732

Answers (3)

Nabin Dhakal
Nabin Dhakal

Reputation: 2202

You can use Stack to place widget over widget. Here is the working example

Stack(
      alignment: Alignment.bottomRight,
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(
                  "assets/images/profile-image.jpeg",
                ),
                fit: BoxFit.cover,
              ),
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.white,
                width: 5.0,
              )),
          height: 100,
          width: 130,
        ),
        Container(
          height: 50,
          width: 50,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
          padding: EdgeInsets.all(5),
          child: Container(
            decoration:
                BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
            child: Center(
              child: IconButton(
                icon: Icon(Icons.edit),
                onPressed: () {},
              ),
            ),
          ),
        ),
      ],
    )

Upvotes: 0

Hemal Moradiya
Hemal Moradiya

Reputation: 2077

Here is the working code

Stack(
      alignment: Alignment.bottomRight,
      children: <Widget>[
        Container(
          height: 200,
          width: 200,
          child: InkWell(
            onTap: () => {},
            child: ClipRRect(
              borderRadius: BorderRadius.circular(100),
              child: Container(
                height: 200,
                width: 200,
                color: Colors.grey[200],
                child: Icon(Icons.person),
              ),
            ),
          ),
        ),
        Container(
          height: 60,
          width: 60,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
          padding: EdgeInsets.all(5),
          child: Container(
            decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey[200]),
            child: IconButton(
              icon: Icon(Icons.edit),
              onPressed: () {},
            ),
          ),
        ),
      ],
    );

Upvotes: 1

Jaime Ortiz
Jaime Ortiz

Reputation: 1319

This can be achieved with the Stack widget check the docs it has a video explaining it really well.

It lets you positions its children relative to the edges of its box.

Upvotes: 0

Related Questions