Text widget overflow options don't appear to work

Question

I have a Text widget which is overflowing its box. I've experimented with the various overflow options but they don't seem to make any difference.

Any thoughts what I'm doing wrong?

 @override
  Widget build(BuildContext context) {
    return ListView.separated(
        separatorBuilder: (BuildContext context, int index) {
          return SizedBox(height: 7);
        },
        padding: EdgeInsets.fromLTRB(10.0, 4.0, 10.0, 4.0),
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];

          return Card(
              shadowColor: Colors.blueAccent,
              elevation: 5,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              color: Color(0xfffffbe7),   
              child: Container(
                padding: EdgeInsets.fromLTRB(16.0, 4.0, 16.0, 4.0),
                child: Column(
                  children: [
                    ...
                    Row(
                      children: [
                        Text(  **// <<<< This is the overflowing widget**
                          '${item.name}',  
                          maxLines: 1,
                          overflow: TextOverflow.clip,
                          style: TextStyle(
                              fontFamily: 'Montserrat',
                              fontSize: 18.0,
                              fontWeight: FontWeight.normal,
                              color: Colors.blue),
                        ),
                      ],
                    ),

Answer 1

The overflow of a Text widget will only work if the Text has a defined width.

There are two problems in the code provided:

• The Text is inside a Row, that does not constrain the width of the children if they are not Flex.
• The Column does not give a minimum width for the children in the default crossAxisAligment.

Making the crossAxisAligment of the Column be CrossAxisAlignment.stretch, make it expand the width of all children to match the available space for the Column. This still leaves the Row problem.

To solve the Row problem, you can define the width of the Text explicitily using a SizedBox, or you can use Flex. Expanded is a Flex widget that makes the child expand to fill the available space, so it works here. But in the example, since the Text is the only child of the Row, removing the Row widget solves the Row problem.

If only the Row problem is solved, Texts that are smaller than the width of the Column will be centered, while the others will follow the TextDirection.

Answer 2

Try wrapping your Text with Flexible()

                Row(
                  children: [
                    Flexible( //Add flexible here
                      child:Text('${item.name}',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontSize: 18.0,
                          fontWeight: FontWeight.normal,
                          color: Colors.blue),
                    )),
                  ],
                ),