Position a chip within CircleAvatar

Question

I am trying to position a Chip in the top right of a CircleAvatar similar to the below, but cant seem to be able to move it

SizedBox(
                      width: 50,
                      height: 50,
                      child: Stack(
                        children: [
                          CircleAvatar(
                            radius: 50,
                            backgroundColor: Colors.indigo,
                            child: Stack(
                              children: const [
                                Align(
                                  alignment: Alignment.topRight,
                                  child: Chip(
                                      label: Text('7'),
                                      side: BorderSide(
                                        color: Colors.white,
                                        width: 1,
                                      )),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

The above code is producing this

I copied your code but cannot reproduce the problem. For me the number is at the top right corner. — MaLa, Dec 29 '22 at 13:07
@BossNass refer my [below](https://stackoverflow.com/a/74951515/13997210) I have try without 3rd package hope its help to you — Ravindra S. Patil, Dec 29 '22 at 13:12
It seems like this happens in Android but not in web. I have not tested iOS or desktop yet. — MaLa, Dec 29 '22 at 13:21
It seems like that different platforms force the size of the chip differently. You can read more here https://api.flutter.dev/flutter/material/ThemeData/materialTapTargetSize.html. According to that, this answer seems best https://stackoverflow.com/a/74951502/14493188 — MaLa, Dec 29 '22 at 13:30

score 1 · Answer 1 · answered Dec 29 '22 at 13:08

By setting materialTapTargetSize: MaterialTapTargetSize.shrinkWrap on Chip widget you force it to take as little space as it needs.

SizedBox(
  width: 100,
  height: 100,
  child: Stack(
    children: const [
      CircleAvatar(
        radius: 50,
        backgroundColor: Colors.indigo,
      ),
      Positioned(
        top: 0,
        right: 0,
        child: Chip(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          label: Text('7'),
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
        ),
      ),
    ],
  ),
)

krishnaacharyaa · Accepted Answer · 2022-12-29T13:36:29.913

You do not require nested Stack and you are missing the heirarchy in placing the widgets. And set materialTapTargetSize to MaterialTapTargetSize.shrinkWrap which will remove the default padding around the chip. And force it to shrink to its size

Mistake in your code:

Stack
 | CircularAvatar
   | Stack          <-- Not needed
     | Align

Correct code:

Stack
  | CircularAvatar
  | Align           <-- Should be in same hierarchy as CircularAvatar

Try the following code:

SizedBox(
        height: 100,
        width: 100,
        child: Stack(
          children: const [
            CircleAvatar(
              backgroundColor: Colors.amber,
              radius: 50,
              backgroundImage: NetworkImage(
                  'https://th.bing.com/th/id/OIP.KZ9jKGoLM_wXMX6aHCB6oAHaEY?pid=ImgDet&rs=1'),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Chip(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                label: Text(
                  '78',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                padding: EdgeInsets.zero,
                labelPadding: EdgeInsets.symmetric(horizontal: 10),
                backgroundColor: Colors.black
              ),
            )
          ],
        ),
      ),

Output:

You are right that there is no need for the stack inside the stack but in this case it does not affect the end result. — MaLa, Dec 29 '22 at 13:36
For text to be added below is it best to wrap this into a column and then add text — Boss Nass, Dec 30 '22 at 08:00
Add `Text` as a sibling to `SizedBox` and wrap these both in `Column` — krishnaacharyaa, Dec 30 '22 at 08:40

score 0 · Answer 3 · answered Dec 29 '22 at 13:10

Try below code

 Stack(
      children: <Widget>[
        CircleAvatar(child: FlutterLogo(),),
        new Positioned(
          top: 0,
          right: 0,
          child: new Container(
            padding: EdgeInsets.all(1),
            decoration: new BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(6),
            ),
            constraints: BoxConstraints(
              minWidth: 15,
              minHeight: 15,
            ),
            child: new Text('11',
              style: new TextStyle(
                color: Colors.white,
                fontSize: 11,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        )
      ],
    ),

Result->

score -1 · Answer 4 · answered Dec 29 '22 at 13:55

There is no need for a nested stack to achieve this. I simply wrapped the Chip in a FittedBox and then the FittedBox in a SizedBox. The thing to understand here is that the CircleAvatar has to be smaller than the main SizedBox and the Chip has to be smaller than the CircleAvatar in order for these to be stacked properly. For that I've used three variables where mainSize is the size of the main SizedBox, radius is the radius of the CircleAvatar and it is two third of the mainSize, avatarSize is the size of the SizedBox containing the Chip and is one half of the radius (or one third of the mainSize).

Here is the revised code:

double mainSize = 50;
double radius = mainSize * 2 / 3;
double avatarSize = radius / 2;

SizedBox(
            width: mainSize,
            height: mainSize,
            child: Stack(
              children: [
                CircleAvatar(
                  radius: radius,
                  backgroundColor: Colors.indigo,
                  child: Text('BN'),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: SizedBox(
                    width: avatarSize,
                    height: avatarSize,
                    child: FittedBox(
                      child: Chip(
                        label: Text('17'),
                        side: BorderSide(
                          color: Colors.white,
                          width: 1,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),

Hope it helps!

Position a chip within CircleAvatar

4 Answers4