Why doesn't a Text Widget go to next line?

Question

I have this custom Widget

class MyEventCard extends StatelessWidget {
  const MyEventCard({
    super.key,
    required this.height,
    required this.width,
    required this.coloreChiaroSfondo,
    required this.coloreScuro,
    required this.data,
    required this.image,
    required this.sottotitolo,
    required this.titolo,
  });

  final double height;
  final double width;
  final Color coloreChiaroSfondo;
  final Color coloreScuro;
  final String image;
  final String data;
  final String titolo;
  final String sottotitolo;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.symmetric(vertical: height * 0.005),
        padding: EdgeInsets.symmetric(
            horizontal: width * 0.02, vertical: width * 0.02),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(width * 0.02)),
          color: coloreChiaroSfondo,
          border: Border.all(
            color: coloreScuro, // Colore del bordo
            width: width * 0.001, // Larghezza del bordo
          ),
        ),
        child: Row(
          children: [
            Container(
              constraints: BoxConstraints(
                  maxHeight: height * 0.4, maxWidth: width * 0.25),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(width * 0.01)),
                child: Image.asset(
                  image,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: width * 0.04),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    data,
                    style:
                        TextStyle(color: coloreScuro, fontSize: width * 0.035),
                  ),
                  Text(
                    titolo,
                    style: TextStyle(
                      color: coloreScuro,
                      fontWeight: FontWeight.bold,
                      fontSize: width * 0.035,
                    ),
                  ),
                  Text(
                    sottotitolo,
                    style: TextStyle(
                      color: coloreScuro,
                      fontWeight: FontWeight.bold,
                      fontSize: width * 0.035,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: SizedBox(
                width: width * 0.1,
              ),
            ),
            IconButton(
                onPressed: () {
                  debugPrint('puntini premuti');
                },
                icon: Icon(
                  Icons.favorite_outline,
                  size: width * 0.06,
                  color: coloreScuro,
                ))
          ],
        ),
      ),
    );
  }
}

That cause this overflow when some String in the Text Widgets is too long:

What I wish to have is something like this:

So, I would like that the text inside the Text Widget automatically goes to the next line if there is no enough space in the Row.

Do you know how to fit the problem? I've already tried to put the Text Widget into a Flexible or Expanded Widget, but it didn't work.

Answer 1

It not go next line because it didn't know the size so you have to wrap column with Expanded and remove padding and expanded sizedBox your code gonna look like this

class MyEventCard extends StatelessWidget {
  const MyEventCard({
    super.key,
    required this.height,
    required this.width,
    required this.coloreChiaroSfondo,
    required this.coloreScuro,
    required this.data,
    required this.image,
    required this.sottotitolo,
    required this.titolo,
  });

  final double height;
  final double width;
  final Color coloreChiaroSfondo;
  final Color coloreScuro;
  final String image;
  final String data;
  final String titolo;
  final String sottotitolo;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.symmetric(vertical: height * 0.005),
        padding: EdgeInsets.symmetric(
            horizontal: width * 0.02, vertical: width * 0.02),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(width * 0.02)),
          color: coloreChiaroSfondo,
          border: Border.all(
            color: coloreScuro, // Colore del bordo
            width: width * 0.001, // Larghezza del bordo
          ),
        ),
        child: Row(
          children: [
            Container(
              constraints: BoxConstraints(
                  maxHeight: height * 0.4, maxWidth: width * 0.25),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(width * 0.01)),
                child: Image.asset(
                  image,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Expanded(
              child : Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    data,
                    style:
                        TextStyle(color: coloreScuro, fontSize: width * 0.035),
                  ),
                  Text(
                    titolo,
                    style: TextStyle(
                      color: coloreScuro,
                      fontWeight: FontWeight.bold,
                      fontSize: width * 0.035,
                    ),
                  ),
                  Text(
                    sottotitolo,
                    style: TextStyle(
                      color: coloreScuro,
                      fontWeight: FontWeight.bold,
                      fontSize: width * 0.035,
                    ),
                  ),
                ],
              ),
            ),
            
            IconButton(
                onPressed: () {
                  debugPrint('puntini premuti');
                },
                icon: Icon(
                  Icons.favorite_outline,
                  size: width * 0.06,
                  color: coloreScuro,
                ))
          ],
        ),
      ),
    );
  }
}

Edit add more explain by Widget inspector as you see in picture below text area width is const now when text line was longer than width it will go next line

Answer 2

Wrap the text widget with SizedBox widget to make the text go the nextline.