Text overflow on Flutter

Issue

I’m trying to put a text inside de window. However, it is out of pixels and I don’t know how to fix it.
This is how it looks now:

This is part of my code:

SizedBox(
  width: MediaQuery.of(context).size.width * 0.7,
  child:
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
     children: [
        Row(children: [
        Text('FRI, 4 MAR · 16:00', style: dateStyle),
      ],),
    Row(children: [
       Text('Chess Competition at Tetuan',
        style: eventStyle, textAlign: TextAlign.left),
    ],),
),

I want that if the text (that for the moment is hardcoded) can’t be shown in the same line, automatically changes to the other.

Solution

By default Row widget tries to give infinite width space for all its children so text widget is getting infinite width.
To make text widget render text on next line we need to provide fix width.
To achieve that you can use Expanded widget, it will take all space available such that it fits the constraint of the row.

SizedBox(
  width: MediaQuery.of(context).size.width * 0.7,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Expanded(
            child: Text(
              'FRI, 4 MAR · 16:00',
            ),
          ),
        ],
      ),
      Row(
        children: [
          Expanded(
            child: Text(
              'Chess Competition at Tetuan',
            ),
          ),
        ],
      ),
    ],
  ),
),    

Answered By – Saurabh Patel

Answer Checked By – David Marino (FlutterFixes Volunteer)