Position a chip within CircleAvatar - Flutter

BossNass
December 29, 2022
214 views
3 votes
4 Answers

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

Tags: chips flutter

Answers

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,
          ),
        ),
      ),
    ],
  ),
)

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->

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:

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!

Please signup or login to give your own answer.

Click here to cancel reply.

Position a chip within CircleAvatar – Flutter

Answers