flutterchips

Position a chip within CircleAvatar


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

enter image description here

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 enter image description here


Solution

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

    enter image description here