I am trying to have my container only take up as much space as needed to display the content, however, since there is a column inside my container if i do not specify height, the container takes up infinite space. Does anyone know of any fix to this? My code is below.
import 'package:flutter/material.dart';
import '../pages/selected_event.dart';
class FeaturedEventTile extends StatelessWidget {
final String eventImagePath;
final String eventName;
final String venueName;
final int attendees;
final double schoolPercentage;
final String date;
final String startTime;
final String endTime;
final String description;
FeaturedEventTile({
required this.eventImagePath,
required this.eventName,
required this.venueName,
required this.attendees,
required this.schoolPercentage,
required this.date,
required this.startTime,
required this.endTime,
required this.description,
});
@override
Widget build(BuildContext context) {
double displayWidth = 0;
double height = eventName.length > 20
? eventName.length > 40
? 305
: 285
: 265;
return LayoutBuilder(builder: (context, constraints) {
displayWidth = constraints.maxWidth;
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SelectedEvent(
eventImagePath: eventImagePath,
eventName: eventName,
venueName: venueName,
attendees: attendees,
schoolPercentage: schoolPercentage,
date: date,
startTime: startTime,
endTime: endTime,
description: description,
)));
},
child: Padding(
padding: const EdgeInsets.only(right: 4, left: 4, bottom: 8),
child: Container(
padding: const EdgeInsets.all(13),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.black38,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.asset(eventImagePath,
height: 160, width: displayWidth, fit: BoxFit.cover)),
SizedBox(height: 15),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
eventName,
style: TextStyle(
fontSize: displayWidth * 0.08,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
SizedBox(height: 5),
Text(
'@ $venueName',
style: TextStyle(
fontSize: displayWidth * 0.05,
color: Colors.red[200],
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(height: 4),
Text(
'$date — $startTime',
style: TextStyle(
fontSize: displayWidth * 0.06,
color: Colors.white,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
),
);
});
}
}
If I do not specify a height, the column takes up infinite space and causes an unbounded error. Thanks for your help!
2
Answers
You have Flexible inside the Column. That widget wants to take all the available space, but column does not have a constraint on height.
Remove Flexible, and remove a Column inside a Column. It’s unnecessary – at least in the code that you posted.
Try set the property mainAxisSize to min