Is there a possibility to put textButton when text is overflowing?

Question

I have Text with overflow: TextOverflow.ellipsis.

As you can see below, text is overflowing. I want to make TextButton instead or after overflowing but only when text is overflowing. I tried to do this with Text.rich and TextSpan but when Text is overflowing TextButton is not appearing.

It's possible to do something like this?

So you want to show a clickable text button when the text overflows instead of the three dots? — Davis, May 11 '22 at 12:18
i think he want the `Read More` button but hidden when the text still in maxLines: 2, smth like that i guess @Davis — Stanly, May 11 '22 at 12:19
I think [this](https://stackoverflow.com/questions/49572747/flutter-how-to-hide-or-show-more-text-within-certain-length) would help if that was what he meant @Royalindo — Davis, May 11 '22 at 12:25
@Davis yeps i guess that was it. just add more code to detect the text is overflowing and use conditional statement — Stanly, May 11 '22 at 12:30
Yes, that is exactly what I want to achieve. But how to detect that text is overflowing? — Karol Wiśniewski, May 11 '22 at 12:44
i haven't try this, but this should help https://stackoverflow.com/questions/54091055/flutter-how-to-get-the-number-of-text-lines. — Stanly, May 11 '22 at 12:52

kekoTheWise · Answer 1 · 2022-05-11T13:01:47.047

As much as I understood, you can use the readmore package.

import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';

class ReadMoreScreen extends StatelessWidget {
  const ReadMoreScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Read More')),
        body: Column(children: [
          ReadMoreText(
            'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
            style: TextStyle(color: Colors.black),
            trimLines: 2,
            colorClickableText: Colors.pink,
            trimMode: TrimMode.Line,
            trimCollapsedText: 'Show more',
            trimExpandedText: ' show less',
            callback: (change) {
              print(change);
            },
          ),
        ]));
  }
}

probably not the best solution but setting trimCollapsedText to empty string works — kekoTheWise, May 11 '22 at 13:03

score -1 · Answer 2 · edited Nov 04 '22 at 18:08

-1

Flexible(
  child:Text("Lorem Ipsum is simply dummy text of the 
     printing and typesetting industry."),
),

edited Nov 04 '22 at 18:08

pmatatias

3,491
3
10
30

answered Nov 04 '22 at 12:42

Amit Jajoo

220
3
7

Is there a possibility to put textButton when text is overflowing?

2 Answers2