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,
)),
)
],
),
),
],
),
),
4
Answers
By setting
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
onChip
widget you force it to take as little space as it needs.Try below code
Result->![image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
You do not require nested
Stack
and you are missing the heirarchy in placing the widgets. And setmaterialTapTargetSize
toMaterialTapTargetSize.shrinkWrap
which will remove the default padding around the chip. And force it to shrink to its sizeMistake in your code:
Correct code:
Try the following code:
Output:
There is no need for a nested stack to achieve this. I simply wrapped the
Chip
in aFittedBox
and then theFittedBox
in aSizedBox
. The thing to understand here is that theCircleAvatar
has to be smaller than the mainSizedBox
and theChip
has to be smaller than theCircleAvatar
in order for these to be stacked properly.For that I’ve used three variables where
mainSize
is the size of the mainSizedBox
,radius
is the radius of theCircleAvatar
and it is two third of themainSize
,avatarSize
is the size of theSizedBox
containing theChip
and is one half of theradius
(or one third of themainSize
).Here is the revised code:
Hope it helps!