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!

CodePudding user response：

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