That's how it looks when I have a WidgetSpan and a TextSpan, and the text inside the TextSpan is too long:

problem

A similar question has already been asked here

This is how it's supposed to look like, just with the TextOverflow.ellipsis, if the text is too long:

target UI

Here is my code:

                Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Text.rich(
                        TextSpan(children: [
                          WidgetSpan(
                            child: Container(
                              margin: const EdgeInsets.only(right: 4.0),
                              child: SvgPicture.asset("assets/icons/building.svg", color: 
                                     htLightGrey),
                            ),
                          ),
                          TextSpan(
                            text: incident.building.name,
                            style: const TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 16.0,
                              color: htLightGrey, /*overflow: TextOverflow.ellipsis*/
                            ),
                          ),
                        ]),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: incident.department != null
                          ? Text.rich(
                              TextSpan(children: [
                                WidgetSpan(
                                  child: Container(
                                    margin: const EdgeInsets.only(right: 4.0),
                                    child: SvgPicture.asset("assets/icons/department.svg", 
                                           color: htLightGrey),
                                  ),
                                ),
                                TextSpan(
                                  text: incident.department!.name,
                                  style: const TextStyle(fontWeight: FontWeight.normal, 
                                         fontSize: 16.0, color: htLightGrey, overflow: 
                                         TextOverflow.ellipsis),
                                ),
                              ]),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            )
                          : const SizedBox.shrink(),
                    )
                  ],
                )

CodePudding user response：

While we like to archive this UI, we are using Row as parent widget, which is perfect. Then we can split the row into tree part, left two part will get same and maximum available width. For this scenario, widget structure as follows.

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.green,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, //start from left
          children: [
            buildItem(
                text:
                    "incident.buildi cident.buildi cident.buildi cident.buildi cident.building.name"),
            buildItem(text: "incide ing.ssss"),
          ],
        ),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            buildItem(text: "i ent.building.name"),
            buildItem(text: "incident.building.ssss"),
          ],
        ),
      ),
    ),
    IconButton(
      onPressed: () {},
      iconSize: 33,
      icon: Icon(Icons.arrow_right),
    ),
  ],
),

And inside Text.rich add use alignment: PlaceholderAlignment.middle, on WidgetSpan to set the middle.

maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,

And you will get

I am using extra container to point the UI, simply remove the container from the column. Also, you can use Row instead of Rich Text.

More about flutter layout

CodePudding user response：

To achieve your target Ui, use the Wrap widget instead of the Row widget. Here, when the contents of the widget overflow/exceed it will break it to the next line, hence you'll achieve your target Ui.