I'm trying to use Spacer()
within the children of Listview, but it's not working the way it should. So I changed to column, as the Spacer()
works fine in it. However I can't come to a implementation that simulates the responsivity and pixel overflow control as the Listview using column. Is there a better way to do this?
Code with list view:
return Drawer(
backgroundColor: CustomColours.vertraIce,
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(
color: CustomColours.vertraBlue,
),
child: const Image(
image: AssetImage('assets/images/logo.webp'),
),
),
ListTile(
leading: const Icon(Icons.person),
title: Text(
'Perfil ',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
await Navigator.popAndPushNamed(context, '/');
},
),
ListTile(
leading: const Icon(Icons.receipt_long),
title: Text(
'Notas',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
await Navigator.popAndPushNamed(context, '/receipt');
},
),
const Spacer(),
const Divider(),
ListTile(
leading: const Icon(Icons.info_outlined),
title: Text(
'Sobre nós',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
_launchURL();
},
),
ListTile(
leading: const Icon(Icons.logout),
title: Text(
'Sair',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
authFirebase.signOut();
},
),
],
),
);
return Drawer(
backgroundColor: CustomColours.vertraIce,
child: Column(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: CustomColours.vertraBlue,
),
child: const Image(
image: AssetImage('assets/images/logo.webp'),
),
),
ListTile(
leading: const Icon(Icons.person),
title: Text(
'Perfil ',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
await Navigator.popAndPushNamed(context, '/');
},
),
ListTile(
leading: const Icon(Icons.receipt_long),
title: Text(
'Notas',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
await Navigator.popAndPushNamed(context, '/receipt');
},
),
const Spacer(),
const Divider(),
ListTile(
leading: const Icon(Icons.info_outlined),
title: Text(
'Sobre nós',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
_launchURL();
},
),
ListTile(
leading: const Icon(Icons.logout),
title: Text(
'Sair',
style: TextStyle(
color: CustomColours.vertraBlack,
fontSize: 20,
),
),
onTap: () async {
authFirebase.signOut();
},
),
],
),
);
If anyone still looking for the answer to my question, I solved it and here it is:
You simply wrap the ListView
with Expanded
and put it as a child of a Column
. Then the ListTile
you want to be at the bottom has to be put was a child of Column
. As seen in the code below:
class MyListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
onTap: () {
// Do something when the ListTile is tapped
},
);
},
),
),
ListTile(
title: Text('Bottom ListTile'),
// Add your logic or functionality here
),
],
);
}
}