I have a UI like this:
The ListView still appears, but the last element is not visible unless I scroll down and hold it. Why is that? I want the items to be fully visible when I scroll. I use a Stack because the list is overlaid on top of the image, that’s why I did it that way. Help me!
This code:
SafeArea(
child: Stack(
children: [
Image.asset(
AppImages.backgroundTechnicalSupport,
fit: BoxFit.fill,
),
Positioned(
top: 20,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: PaddingConstants.h20R,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
LocaleKeys.technicalSupport_title.tr(),
maxLines: 2,
style: TextStyle(
fontSize: 24.zsp(context),
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
),
),
],
),
),
Positioned(
top: 280.wh,
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadiusConstants.tl15tr15,
color: ThemeHelper.backgroundRealm(context),
),
padding: PaddingConstants.h20v10R,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
14.wVerticalSpace,
Text(
LocaleKeys.technicalSupport_supportType.tr(),
style: TextStyle(
fontSize: 20.zsp(context),
fontWeight: FontWeight.w600,
color: ThemeHelper.black(context),
),
),
16.wVerticalSpace,
Container(
constraints: BoxConstraints(
maxHeight:
MediaQuery.of(context).size.height - 260.wh,
),
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (_, index) {
return Container(
padding: PaddingConstants.h20v10R,
decoration: BoxDecoration(
border: Border.all(
color: ThemeHelper
.borderDateMeetingRoom(context),
),
borderRadius:
BorderRadiusConstants.c15wr,
),
child: Row(
children: [
16.wHorizontalSpace,
Expanded(
child: Padding(
padding: PaddingConstants.v20R,
child: Text(
'Cai dat tai khoan',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18.zsp(context),
color: ThemeHelper
.primaryBlueColor(
context),
),
),
),
),
SvgPicture.asset(
AppImages.arrowRight,
colorFilter:
ThemeHelper.primaryBlueColor(
context)
.toSvgColor,
),
],
),
);
},
separatorBuilder: (_, __) =>
15.wVerticalSpace,
itemCount: 6,
)
),
],
),
),
),
],
),
)
Im not good in english, sorry for this
2
Answers
Just wrap your ListView with padding, and set according to your need.
you can also add this padding in your continer directly.
This is demo code also i am providing dart pad code https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1 so you can checkout if any error or issue in your code then message me if it’s work then up vote.