CODEWITHSUNDEEP
androidflutteruser-interfacecentering
David Berryman
David Berryman

Reputation: 182

Flutter: Position Icon next to a centered CircleAvatar

I am trying to put an edit Icon on the right top side next to a centered Circle Avatar. But if I use a Center Widget inside of a Row Widget it does not work:

Row(
              children: <Widget>[
                Center(
                  child:
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      ""),
                ),
                ),
                Icon(Icons.edit),
              ],
            )

and if I center the Rows Content with mainaxisalignment, it does not center the avatar but the avatar together with the Icon:

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      "https://autix.ch/wp-content/uploads/profile-placeholder.png"),
                ),
                Icon(Icons.edit),
              ],
            ),

It should look like this:

Upvotes: 3

Views: 10217

Answers (3)

HFranco
HFranco

Reputation: 609

You can do it without container:

CircleAvatar(
  backgroundImage: NetworkImage(photoURL),
  child: Stack(
    children: [
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.ac_unit),
      )
    ],
  ),
),

Upvotes: 1

Marci
Marci

Reputation: 180

You can wrap the edit Icon with a Container Widget and align this to the topRight like this:

Container(
   height: 140,
   alignment: Alignment.topRight,
   child: Icon(Icons.edit),
),

Upvotes: 0

Try
Try

Reputation: 3469

Try to use a Stack:

Container(
  width: 200,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.access_time),
      ),
      Container(
        width: 200,
        height: 200,
        child: CircleAvatar(
          child: Text('Avatar'),
        ),
      ),
    ],
  ),
),

Result:

Result

Upvotes: 6

Related Questions