I am trying to get this:First image, but instead all I get is this: What I get after running code

I basically created the three widgets and called them in the profile page like so:

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: Sizes.p12),
        child: Column(
          children: [
            Stack(
              children: [
                const _MainCard(), 
                Positioned(
                  top: 190,
                  left: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.p12),
                    child: Column(
                      children: [
                        _PlanCard(), 
                        const SizedBox(
                            height:
                                100), // Space between
                      ],
                    ),
                  ),
                ),
              ],
            ),
            const _RecommendedCard(),
          ],
        ),
      ),
    );
  }

How can I also reduce the space between the plan and recommended card?
I After using stackstried using stack and got this