flutterdarttextwidgetwarp

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


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

enter image description here


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:


Solution

  • 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.