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
SizedBoxorPaddingadding space after theStack - Used
debugPaintSizeEnabled = true;to check widget boundaries - Tried wrapping the
Stackin aContainerwith 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?
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
SizedBoxorPaddingadding space after theStack - Used
debugPaintSizeEnabled = true;to check widget boundaries - Tried wrapping the
Stackin aContainerwith 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?
1 Answer
Reset to default 1I 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: [
Imagework(
"https://encrypted-tbn0.gstatic/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'),
],
),
);
}
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744207715a4563183.html
评论列表（0条）