skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. Try set the property mainAxisSize to min

    Column(
      mainAxisSize: MainAxisSize.min,
      ...
    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search