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)
                      ]),
                    ],
                  ),

Answer 1

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)),
               ]),

Answer 2

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"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

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)
                  ])
                ],
              )
            ])));