Hi. How to make space between items in Listview. I’ve tried changing Column mainAxisAlignment: MainAxisAlignment.start, to MainAxisAlignment.spaceBetween and tried adding padding to the ListView but still no change. Is there anyone who can give an opinion on how to make space between ListView items.
Container(
color: Colors.white,
padding: const EdgeInsets.all(20),
child: Column(
children: [
SizedBox(height: _appointmentList.isNotEmpty ? 20 : 0),
_appointmentList.isNotEmpty
? Row(
children: [
const Text(
"Appointment",
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 20,
height: 1.4,
fontWeight: FontWeight.w500),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AppointmentList(
token: widget.token,
userUID: widget.userUID,
apiEndPoint: widget.apiEndPoint,
)),
);
},
child: const Text("View all",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xFF0E71B0))),
),
),
)
],
)
: Container(),
SizedBox(height: _appointmentList.isNotEmpty ? 15 : 0),
_appointmentList.isNotEmpty
? Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 240,
child: ListView(
//scrollDirection: Axis.horizontal,
scrollDirection: Axis.vertical,
children: _appointmentList
.map((item) =>
item.doctorProfile.uid == doctor["UID"]
? appointmentBox(
context, item, widget.token)
: Container())
.toList()
.cast<Widget>(),
),
)
],
)
: Container(),
const SizedBox(height: 20),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MakeAnAppointment(
doctor: doctor,
token: widget.token,
userUID: widget.userUID,
apiEndPoint: widget.apiEndPoint,
)),
);
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 12, horizontal: 20),
decoration: const BoxDecoration(
color: Color(0xFF0E71B0),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/icons/calendar_plus_icon.svg",
color: Colors.white,
matchTextDirection: true,
),
const SizedBox(width: 5),
const Text(
"Make an appointment",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600),
),
],
),
),
),
],
),
)
>Solution :
try wrapping appointmentBox with Padding:
Padding(
padding: const EdgeInsets.all(8.0),
child: appointmentBox(context, item, widget.token),
)