0

The requirement is when the Text did not show all the data, detail dialog will show when use tap the Text widget.

Code just like:

class _DraftPage2State extends State<DraftPage2> {
  var _showedAllData = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(titleText: '判断Text文本是否显示完'),
      body: Center(
        child: GestureDetector(
          onTap: () {
            if (!_showedAllData) {
              // showDialog
            }
          },
          child: Container(
            width: 100,
            height: 30,
            color: Colors.red,
            child: const Text(
              'AAAAAAAAAAAAAAAAAAAA',
              style: TextStyle(fontSize: 20),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
      ),
    );
  }
}

For example:

  • not showed all data

enter image description here

  • showed all data

enter image description here

So how can I detect the Text widget showed all data?

无夜之星辰
  • 5,426
  • 4
  • 25
  • 48
  • 2
    You can use [auto_size_text](https://pub.dev/packages/auto_size_text). There is a parameter `overflowReplacement` allow you to replace text when it overflow, you can change the replacement as button to show more, no need to detect, all auto – Sam Chan Apr 26 '22 at 03:10
  • [Similar Question](https://stackoverflow.com/questions/51114778/how-to-check-if-flutter-text-widget-was-overflowed) – Zaid Alazwi Apr 26 '22 at 03:23
  • @SamChan Great, works pretty good. – 无夜之星辰 Apr 26 '22 at 07:00

0 Answers0