I have a widget I build, showing a list of meals in it. On one screen it aligns perfectly, on another screen the text is aligned to the bottom and there is a space over the items I cant explain. I added a red container for demonstration purposes:
Here is the widget:
Widget buildFoodItem() {
return SizedBox(
width: 130,
child: Stack(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 32, left: 8, right: 8, bottom: 15),
child: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: fumigruen,
offset: const Offset(1.1, 4.0),
blurRadius: 8.0),
],
gradient: LinearGradient(
colors: [
fumigruen,
fumigruen_accent,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
topLeft: Radius.circular(8.0),
topRight: Radius.circular(54.0),
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 30, left: 10, right: 10, bottom: 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"${widget.mahlzeit}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
letterSpacing: 0.2,
color: Colors.white,
),
),
Expanded(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(top: 2, bottom: 8),
child: buildItemList(),
),
),
),
(totalMJ != 0)
? Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"${totalMJ.toStringAsFixed(1)}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0.2,
color: Colors.white,
),
),
Padding(
padding:
const EdgeInsets.only(left: 4, bottom: 3),
child: Text(
'MJ',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 0.2,
color: Colors.white,
),
),
),
],
)
: Container(),
Positioned(some icons),
Positioned(some icons),
],
),
),
),
),
],
),
);
}
Widget buildItemList() {
return SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.futterplan.lRationOfFutterplan!.length,
itemBuilder: (context, index) {
final item = widget.futterplan.lRationOfFutterplan![index];
return (item.mahlzeit == widget.mahlzeit)
? Text(
'${item.fFuttermittel!.name!}',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
color: Colors.white,
),
)
: Container();
},
),
);
}
and here are the pictures of the widget in action
the correct working widget
same widget but not working properly
many thanks in advance for helping me out
Found an answer here: Flutter: unexpected space at the top of ListView
It seems that there was a padding that could be avoidded by inserting
padding: EdgeInsets.zero,
The only strange thing was, that i needed the code line for onw specific screen and not on the other screen where i was also using that widget.