Make Container take content size of child - flutter

Question

I'm new in Flutter,
I have a Container which child is Stack that using Positioned inside.
My problem is Container just taking Non-Positioned widget size.
Here is my problem:
I want something like this:
Here is my Widget code:
class CheckUpItem extends StatelessWidget {
const CheckUpItem({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
width: 100,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Colors.white,
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFFBAD9F8),
),
),
boxShadow: [
BoxShadow(
color: Color(0x00000029),
offset: Offset(2, 3),
blurRadius: 2,
),
],
),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(4),
),
child: Container(
decoration: const BoxDecoration(
color: Color(0xFFE6F6FF),
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFFBAD9F8),
),
),
),
child: Consumer(
builder: (context, ref, child) {
return Center(
child: Text(
'BMI',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
height: 1.43,
color: Color(0xFF6B6B6B),
),
),
);
},
),
),
),
Container(
padding: const EdgeInsets.only(top: 5.5, bottom: 4),
child: Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.fromBorderSide(
BorderSide(
width: 2,
color: Color(0xFFBF3D3D),
),
),
color: Color(0xFFF86060),
),
child: const Center(
child: Text(
'B',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
height: 1,
fontSize: 20,
),
),
),
),
Positioned(
bottom: -6,
left: 26,
child: Container(
width: 22,
height: 22,
padding: const EdgeInsets.fromLTRB(1, 0, 3, 2),
decoration: const BoxDecoration(
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFF6A8FD4),
),
),
color: Color(0xFFE0EEFC),
shape: BoxShape.circle,
),
child: SvgPicture.asset(ImageAssets.speaker),
),
),
],
),
const SizedBox(height: 6),
],
),
),
],
),
),
);
}
}
I'm stucking all day with this, I'm tempary using Column and const SizedBox(height: 6) for fake height.
How to make it right way?
P/s: Sorry, my English is not good!

Answer 1

Because every thing is static hear and you know how much the svg container going down, you can calculate it and add it to padding bottom, like this:
Container(
padding: const EdgeInsets.only(top: 5.5, bottom: 10), // 4 + 6(Positioned bottom)
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.fromBorderSide(
BorderSide(
width: 2,
color: Color(0xFFBF3D3D),
),
),
color: Color(0xFFF86060),
),
child: const Center(
child: Text(
'B',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
height: 1,
fontSize: 20,
),
),
),
),
Positioned(
bottom: -6,
left: 26,
child: Container(
height: 22,
width: 22,
decoration: const BoxDecoration(
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFF6A8FD4),
),
),
color: Color(0xFFE0EEFC),
shape: BoxShape.circle,
),
child: SvgPicture.asset(
'assets/images/tes.svg',
),
),
),
],
),
),