android – Flutter: Surprising House Between Stack and Textual content Widget

Right here’s how your situation will be formatted as a Stack Overflow query:

Title: Flutter: Surprising House Between Stack and Textual content Widget

Physique:
I am engaged on a Flutter UI the place a Stack is adopted by a Textual content widget that shows “My Card.” Nonetheless, there’s an surprising area between the Stack and the Textual content widget that I didn’t add.

I’ve hooked up pictures of what I’ve now and what the design is meant to be.

Right here’s my code:

import 'bundle:cardapp/gen/property.gen.dart';
import 'bundle:cardapp/presentation/widgets/Textual content/textual content.dart';
import 'bundle:cardapp/presentation/widgets/buttons/buttons.dart';
import 'bundle:cardapp/presentation/widgets/colours/colours.dart';
import 'bundle:flutter/materials.dart';
import 'bundle:flutter_screenutil/flutter_screenutil.dart';

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

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

class _CardScreenState extends State {
  String selectedCurrency = 'USD';

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      backgroundColor: whitePrimary,
      physique: Column(
        mainAxisAlignment: MainAxisAlignment.begin,
        crossAxisAlignment: CrossAxisAlignment.begin,
        youngsters: [
          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),
                                ),
                              ],
                            ),
                            little one: DropdownButtonHideUnderline(
                              little one: DropdownButton(
                                dropdownColor: whitePrimary,
                                worth: selectedCurrency,
                                icon: Icon(Icons.keyboard_arrow_down,
                                    measurement: 18.sp),
                                isDense: true,
                                gadgets: [
                                  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(
                                    worth: 'GBP',
                                    little one: Row(
                                      youngsters: [
                                        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(
                                    worth: 'NGN',
                                    little one: Row(
                                      youngsters: [
                                        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: (worth) {
                                  setState(() {
                                    selectedCurrency = worth!;
                                  });
                                },
                              ),
                            ),
                          ),
                          Property.svg.avatar.svg(),
                        ],
                      ),
                      SizedBox(peak: 40.h),
                      CustomTextWidget(
                        textual content: 'Your card steadiness',
                        fontSize: 15.sp,
                        coloration: grayPrimary,
                        fontWeight: FontWeight.w500,
                      ),
                      SizedBox(
                        peak: 15.sp,
                      ),
                      CustomTextWidget(
                        textual content: '$45,550',
                        fontSize: 40,
                        coloration: bluePrimary,
                        fontWeight: FontWeight.w500,
                      ),
                      SizedBox(
                        peak: 25.h,
                      ),
                      Row(
                        youngsters: [
                          reusableButton(
                            'Send',
                            Assets.svg.sendArrowUp.svg(),
                          ),
                          SizedBox(
                            width: 22.w,
                          ),
                          reusableButton(
                            'Receive',
                            Assets.svg.receiveArrowDown.svg(),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
          CustomTextWidget(
            textual content: 'My Card',
            fontSize: 20.sp,
            coloration: blackPrimary,
            fontWeight: FontWeight.daring,
          ),
        ],
      ),
    );
  }
}

What I’ve Tried:

• Ensured there’s no SizedBox or Padding including area after the Stack
• Used debugPaintSizeEnabled = true; to verify widget boundaries
• Tried wrapping the Stack in a Container with a coloration to see its precise measurement

What I at the moment have:

The specified end result:

How can I take away this undesirable area between the Stack and the Textual content widget? Any concepts on what may be inflicting this?