Flutter: Unexpected Space Between Stack and Text Widget

Here’s how your issue can be formatted as a Stack Overflow question:

Title: Flutter: Unexpected Space Between Stack and Text Widget

Body:
I'm working on a Flutter UI where a Stack is followed by a Text widget that displays "My Card." However, there's an unexpected space between the Stack and the Text widget that I did not add.

I’ve attached images of what I have now and what the design is supposed to be.

Here’s my code:

import 'package:cardapp/gen/assets.gen.dart';
import 'package:cardapp/presentation/widgets/Text/text.dart';
import 'package:cardapp/presentation/widgets/buttons/buttons.dart';
import 'package:cardapp/presentation/widgets/colors/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CardScreen extends StatefulWidget {
  const CardScreen({super.key});

  @override
  State<CardScreen> createState() => _CardScreenState();
}

class _CardScreenState extends State<CardScreen> {
  String selectedCurrency = 'USD';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: whitePrimary,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Assets.images.dashboardJumboBG1.image(
                height: 360.h,
                width: 1.sw,
                fit: BoxFit.cover,
              ),
              SafeArea(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 50.w),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          // Currency Dropdown
                          Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 8.w, vertical: 6.h),
                            decoration: BoxDecoration(
                              color: whitePrimary,
                              borderRadius: BorderRadius.circular(8.r),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black.withOpacity(0.1),
                                  blurRadius: 4,
                                  offset: const Offset(0, 2),
                                ),
                              ],
                            ),
                            child: DropdownButtonHideUnderline(
                              child: DropdownButton<String>(
                                dropdownColor: whitePrimary,
                                value: selectedCurrency,
                                icon: Icon(Icons.keyboard_arrow_down,
                                    size: 18.sp),
                                isDense: true,
                                items: [
                                  DropdownMenuItem(
                                    value: 'USD',
                                    child: Row(
                                      children: [
                                        Assets.images.unitedStates2
                                            .image(height: 20.h, width: 20.w),
                                        SizedBox(width: 8.w),
                                        Text('USD',
                                            style: TextStyle(
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.bold)),
                                      ],
                                    ),
                                  ),
                                  DropdownMenuItem(
                                    value: 'GBP',
                                    child: Row(
                                      children: [
                                        Assets.images.unitedKingdom
                                            .image(height: 20.h, width: 20.w),
                                        SizedBox(width: 8.w),
                                        Text('GBP',
                                            style: TextStyle(
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.bold)),
                                      ],
                                    ),
                                  ),
                                  DropdownMenuItem(
                                    value: 'NGN',
                                    child: Row(
                                      children: [
                                        Assets.images.nigeria
                                            .image(height: 20.h, width: 20.w),
                                        SizedBox(width: 8.w),
                                        Text('NGN',
                                            style: TextStyle(
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.bold)),
                                      ],
                                    ),
                                  ),
                                ],
                                onChanged: (value) {
                                  setState(() {
                                    selectedCurrency = value!;
                                  });
                                },
                              ),
                            ),
                          ),
                          Assets.svg.avatar.svg(),
                        ],
                      ),
                      SizedBox(height: 40.h),
                      CustomTextWidget(
                        text: 'Your card balance',
                        fontSize: 15.sp,
                        color: grayPrimary,
                        fontWeight: FontWeight.w500,
                      ),
                      SizedBox(
                        height: 15.sp,
                      ),
                      CustomTextWidget(
                        text: '\$45,550',
                        fontSize: 40,
                        color: bluePrimary,
                        fontWeight: FontWeight.w500,
                      ),
                      SizedBox(
                        height: 25.h,
                      ),
                      Row(
                        children: [
                          reusableButton(
                            'Send',
                            Assets.svg.sendArrowUp.svg(),
                          ),
                          SizedBox(
                            width: 22.w,
                          ),
                          reusableButton(
                            'Receive',
                            Assets.svg.receiveArrowDown.svg(),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
          CustomTextWidget(
            text: 'My Card',
            fontSize: 20.sp,
            color: blackPrimary,
            fontWeight: FontWeight.bold,
          ),
        ],
      ),
    );
  }
}

What I’ve Tried:

• Ensured there’s no SizedBox or Padding adding space after the Stack
• Used debugPaintSizeEnabled = true; to check widget boundaries
• Tried wrapping the Stack in a Container with a color to see its actual size

What I currently have:

The desired result:

How can I remove this unwanted space between the Stack and the Text widget? Any ideas on what might be causing this?

I check your code there is an issue with Image

You mention width is 1; also, the image is not fitted so there's some spacing

So i have added your code on my system with different imageand its working fine

I have attached screenshot Please check

enter image description here

import 'package:flutter/material.dart';

class CardScreen extends StatefulWidget {
  const CardScreen({super.key});

  @override
  State<CardScreen> createState() => _CardScreenState();
}

class _CardScreenState extends State<CardScreen> {
  String selectedCurrency = 'USD';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Image.network(
                "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8lF2jbNFBy7X4D6F43tRiCxG2oRWLP9v8LQ&s",
                height: 360,
                width: MediaQuery.of(context).size.width,
                fit: BoxFit.cover,
              ),
              SafeArea(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 50),
                  child: Column(
                    children: [
                      SizedBox(height: 40),
                      Text(
                        'Your card balance',
                      ),
                      SizedBox(
                        height: 15,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
          Text('My Card'),
        ],
      ),
    );
  }
}