Search code examples
flutterdartflutter-layoutflutter-text

Is it possible to make sticky label for text which can be overflowed in flutter?


It's easy to understand what I want to do by looking at the following screenshots.

When there isn't too much text, I want the label to snuggle up to it. enter image description here

When the text doesn't fit completely on one line, I want it to overflow like in the screenshot. enter image description here

Has anyone encountered a similar problem and knows how to do it in the proper way?

UPDATE 1 What have I already tried?

  1. RichText
RichText(
    overflow: TextOverflow.ellipsis,
    text: TextSpan(
      children: [
        TextSpan(...),
        WidgetSpan(
          child: ...,
        ),
      ],
    ),
  )
  1. Row with Expanded. As a result, as expected, the label is no longer pinned to the text.

    Row( children: [ Expanded( child: Text( text, overflow: TextOverflow.ellipsis, ), ), Label(), ], ),


Solution

  • I am using Row with Flexible<Text> to handle this case.

    Row(
      children: [
        Flexible(
          child: Text(
            "Left most text that overflows the screen and creates an ellipsis",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          ),
        ),
        Container(
          width: 40,
          height: 40,
          color: Colors.amber,
        )
      ],
    ),
    

    enter image description here