flutter - How can I put a widget after Exapnded Long Text in Row?

Question

How can I a dynamic long text with another widget (like a button) Expanded in a row like this:

---

I try Expanded, Flexible and Warp and I did not reach a conclusion.

! attention to I doesn't want this to be in a Stack or use Padding from the bottom! cause this text to have will change and its length may be bigger or shorter.

---

UPDATE : I try to use ExtendedText, but the child of TextOverFlowWidget doesn't show for me. my code:

Container(
  color: Colors.amber,
  height: 70,
  child: ExtendedText(
    'bbbbb ${toPhoneStyle(widget.inputPhone)}  (${widget.selectedCountry.dialCode})  aaaaaa aaaaaaaaaaa',
     overflowWidget: TextOverflowWidget(
        // maxHeight: double.infinity,
        // align: TextOverflowAlign.right,
        // fixedOffset: Offset.zero,
        child: Container(
            width: 60,
            height: 60,
            color: Colors.red,
            ),
         ),
      ),
   ),

---

But if miniaturize height of Container like height:20 , show like this:

question from:https://stackoverflow.com/questions/66060621/how-can-i-put-a-widget-after-exapnded-long-text-in-row

Answer 1

Try this: Extended text package

There is an overflow widget you can use.

Check their example:

ExtendedText(...
        overFlowWidget:
            TextOverflowWidget(
                //maxHeight: double.infinity,
                //align: TextOverflowAlign.right,
                //fixedOffset: Offset.zero,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('u2026 '),
                    RaisedButton(
                      child: const Text('more'),
                      onPressed: () {
                        launch(
                            'https://github.com/fluttercandies/extended_text');
                      },
                    )
                  ],
                ),
              ),
        ...
      )

---

Ok turned out that you need to specify maxLines for overflow to work properly. I think you are instead going for a widget that follows the text. You can try Text.rich() widget

Text.rich(
  TextSpan(
    text: 'This is an example text!',
    children: [
      WidgetSpan(
        // Set the alignment
        alignment: PlaceholderAlignment.middle,
        // You can put any widget inline with text using WidgetSpan
        child: Container(
          margin: const EdgeInsets.only(left: 8.0),
          child: ElevatedButton(
            child: Text("Read more..."),
            onPressed: () {},
          ),
        ),
      ),
    ],
  ),
);

You don't need the extended text package in this case.