Flutter ignoring overflow and wrap settings

Question

I am trying to work out why Flutter is ignoring my overflow and wrap settings on my Text widget

Card(
            borderOnForeground: true,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
              side: BorderSide(
                color: Colors.grey[200],
                width: 1.0,
              ),
            ),
            child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                child: Column(children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            CircleAvatar(
                                backgroundImage:
                                    widget.user.profileImageUrl.isEmpty
                                        ? const AssetImage(
                                            'assets/images/avatar-5.png')
                                        : CachedNetworkImageProvider(
                                            widget.user.profileImageUrl,
                                          )),
                            const SizedBox(width: 10),
                            Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                      '${widget.user.firstName} ${widget.user.lastName[0]}'),
                                  Text(task.desc,
                                      overflow: TextOverflow.fade,
                                      maxLines: 2,
                                      softWrap: false,
                                      style: Theme.of(context)
                                          .textTheme
                                          .bodyText1),
                                ]),
                          ],
                        ),
                        Row(children: [
                          const Icon(Icons.calendar_today_outlined, size: 12),
                          const SizedBox(width: 6),
                          Text(DateFormat('E, d MMM').format(task.due),
                              style: Theme.of(context).textTheme.caption)
                        ]),
                      ]),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      _buildBudget(formatCurrency.format(widget.task.budget))
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(children: [
                        const Icon(Icons.location_on_outlined, size: 12),
                        const SizedBox(width: 6),
                        Text(task.location,
                            style: Theme.of(context).textTheme.caption)
                      ]),
                    ],
                  ),

Denise · Accepted Answer · 2022-01-26T13:16:19.267

Here is a similar question, that might help you:

Flutter - Wrap text on overflow, like insert ellipsis or fade

To achieve the desired effect, you have to tell your text widgets how much space they should take. For example by wrapping your column (the parent of the overflowing text widgets) with a Flexible or Expanded.

I tried to minify your example a little bit to make it more obvious:

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Column(
          children: [
            // Your other widegts
            // Row(children: [ ... ]),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Your circle avatar with a constant size
                Container(width: 50, height: 50, color: Colors.red),
                const SizedBox(width: 10),
                // The important part
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text('Firstname Lastname'),
                      const Text(
                          'Really long description that does not fit on to the screen',
                          overflow: TextOverflow.fade,
                          maxLines: 2),
                    ],
                  ),
                ),
              ],
            ),
            // Your other widegts
            // Row(children: [ ... ]),
          ],
        ),
      ),
    );
  }
}

Note that you should remove the softWrap: false. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.

If the text exceeds 2 lines, the faded overflow effect will be visible. If you do not want that, just remove the maxLines attribute.

Full Example

Here is a full example with a structure, that will work within a ListView assuming location, date and budget widgets should be on the same line:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListView(shrinkWrap: true, children: [
        CardWidget(),
        CardWidget(),
        CardWidget(),
      ]),
    );
  }
}

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      borderOnForeground: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
        side: BorderSide(
          width: 1.0,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Column(
          children: [
            Row(
              children: [
                Container(height: 50, width: 50, color: Colors.red),
                const SizedBox(width: 10),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Firstname Lastname'),
                      Text(
                          "Long text that exceeds multiple lines. Long text that exceeds multiple lines. Long text that exceeds multiple lines",
                          overflow: TextOverflow.fade,
                          maxLines: 3,
                          style: Theme.of(context).textTheme.bodyText1),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 25),
            Row(
              children: [
                // Location and Date
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Icon(Icons.location_on_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text("Location"),
                  ],
                ),
                const SizedBox(width: 25),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Icon(Icons.calendar_today_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text("Date"),
                  ],
                ),
                // The budget widget
                Expanded(child: Container()),
                Text("200"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

as above we have tried this this wrapping column with expanded but It actually causes more issues — Boss Nass, Jan 26 '22 at 12:34
doing as above causes a render box error as you cannot have an expanded within list view with shrink-wrap — Boss Nass, Jan 26 '22 at 12:37
Ah, you are using a list view around the widget you just showed in you example? I just tried it within a ListView and I did not get a renderBox error. But I noticed, you use many stacked rows, e.g.: Row(children: [Row( ...)]). I recommend reducing them. I will update my answer, just give me a second. — Denise, Jan 26 '22 at 12:45

Maurice Raguse · Answer 2 · 2022-01-26T12:46:33.080

Wrap your Column in a Expanded.. should be work

Expanded(child:Column(...))

and try to add Expanded (wrap Row) here too (last line in code):

Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                child: Column(children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(child:Row(  ////HERE

The Row does not have a specified width. So one of the childs should have an Expanded

ok i have tested... here the full code:

Card(
        borderOnForeground: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
          side: BorderSide(
            color: Colors.grey,
            width: 1.0,
          ),
        ),
        child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Column(children: [
              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          CircleAvatar(backgroundImage: const AssetImage('assets/images/avatar-5.png')),
                          const SizedBox(width: 10),
                          Expanded(
                            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                              Text('${'widget.user.firstName'} '),
                              Text('task.desc',
                                  overflow: TextOverflow.fade,
                                  maxLines: 2,
                                  softWrap: false,
                                  style: Theme.of(context).textTheme.bodyText1),
                            ]),
                          ),
                        ],
                      ),
                    ),
                    Row(children: [
                      const Icon(Icons.calendar_today_outlined, size: 12),
                      const SizedBox(width: 6),
                      Text('DateFormat( ).format(task.due)', style: Theme.of(context).textTheme.caption)
                    ]),
                  ]),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [Text('dff')],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(children: [
                    const Icon(Icons.location_on_outlined, size: 12),
                    const SizedBox(width: 6),
                    Text('task.location', style: Theme.of(context).textTheme.caption)
                  ])
                ],
              )
            ])));

2 expanded are required... look in my full code example where — Maurice Raguse, Jan 26 '22 at 13:00

score 0 · Answer 3 · edited Feb 01 '22 at 10:01

Wrap child of Column with Flexible :

Column(
    mainAxisSize : MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
         Flexible (child :Text(
              '${widget.user.firstName} ${widget.user.lastName[0]}')),
         Flexible (
               child :Text(task.desc,
               overflow: TextOverflow.fade,
               maxLines: 2,
               softWrap: false,
               style: Theme.of(context)
                   .textTheme
                   .bodyText1)),
               ]),

Flutter ignoring overflow and wrap settings

3 Answers3