well I have this SingleChildScrollView as my body
but I cannot fully scroll to the bottom
class LigoLog extends StatefulWidget {
const LigoLog({super.key});
@override
State<LigoLog> createState() => _LigoLogState();
}
class _LigoLogState extends State<LigoLog> {
final _box = Hive.box('ligo');
@override
Widget build(BuildContext context) {
var deviceWidth = MediaQuery.of(context).size.width;
var deviceHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
centerTitle: true,
toolbarHeight: 60.0,
iconTheme: const IconThemeData(
color: Colors.white,
),
title: Text(
'appbarTitle'.tr,
style: const TextStyle(
fontFamily: 'Lalezar',
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
backgroundColor: const Color(0xffF85E63),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
Hive.box('ligo').clear();
});
},
backgroundColor: const Color(0xffF85E63).withOpacity(0.5),
child: const Icon(
Icons.delete_rounded,
color: Colors.white,
size: 25.0,
),
),
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: SizedBox(
width: deviceWidth,
height: deviceHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 350.0,
height: deviceHeight,
child: ListView.builder(
shrinkWrap: true,
itemCount: _box.length,
itemBuilder: (context, index) {
Log log = _box.getAt(index);
return Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
height: 210.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
width: 1.5,
color: const Color(0xffF85E63),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'responsibleAdminLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.responsibleAdmin,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'transactionDate'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.date,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'userLogLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
'@${log.user}',
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'userAmountLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.amount,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'userCostInDollarsLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.costInDollars,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'userCostInTomansLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.costInTomans,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'userStatusLabel'.tr,
style: const TextStyle(
color: Color(0xffF85E63),
fontSize: 18.5,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
const SizedBox(width: 8.0),
Text(
log.status,
style: TextStyle(
color: LigoStatus.statusColor,
fontSize: 18.0,
fontFamily: 'Lalezar',
fontWeight: FontWeight.normal,
),
),
],
),
),
],
),
),
);
},
),
),
],
),
),
),
);
}
}
I Tried some things like using double.infinity as height but it didn't work... or maybe I did sth wrong.
I Would be thankful If you help me with this.
There are several ways to fix this.
First way, you just need to add additional padding to the bottom of the ListView.
ListView.builder(
padding: const EdgeInsets.only(bottom: 160.0),
// ...
Apart from fixing the issue, adding bottom padding to a ListView is generally good for the UX.
Second way, remove the unnecessary widget wraps. ListView is a scrollable widget, so wrapping it in a SingleChildScrollView is unnecessary. Change your widget tree from
SingleChildScrollView > SizedBox > Column > SizedBox > ListView.builder
to
Center > SizedBox > ListView.builder
Now the code should look like this:
body: Center(
child: SizedBox(
width: 350.0,
child: ListView.builder(
// ...
),
),
)