How to show a more text at the end in place of TextOverflow.ellipsis inFlutter?

Question

I want to implement showMore kind of text in place of ellipsis or fade on a text. Like we could do by this library in React https://www.npmjs.com/package/react-show-more-text.

This is a simple long text

Container(
  color: Colors.white,
  child: Text(
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    overflow: TextOverflow.ellipsis,
  ),
)

Now if my text overflow on the device I want to show a text at the end showMore which typically show the rest of the content in a overlay container.

Does this answer your question? [Flutter: How to hide or show more text within certain length](https://stackoverflow.com/questions/49572747/flutter-how-to-hide-or-show-more-text-within-certain-length) — Sanjay Sharma, May 24 '20 at 17:38
Not really, wanted to show the rest of the text in a overlay container, like we normally see in a website. — meditat, May 24 '20 at 17:40

Sanjay Sharma · Accepted Answer · 2020-05-25T07:55:28.740

2

Please check this plugin. You need to pass GlobalKey of the widget where you want to show text popup.

ShowMoreTextPopup popup = ShowMoreTextPopup(context,
    text: text,
    textStyle: TextStyle(color: Colors.black),
    height: 200,
    width: 100,
    backgroundColor: Color(0xFF16CCCC));
popup.show(
  widgetKey: key,

edited May 25 '20 at 07:55

answered May 24 '20 at 22:29

Sanjay Sharma

3,687
2
22
38

1

Thanks, this is kind of what I looking for. – meditat May 25 '20 at 05:41

score 0 · Answer 2 · answered May 24 '20 at 17:59

You can do something like this, the code is fully working:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  bool more = false;
  String text =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Column(children: <Widget>[
        more
            ? Text(text)
            : Text(
                text,
                overflow: TextOverflow.ellipsis,
              ),
        FlatButton(
          child: more ? Text("less") : Text("more"),
          onPressed: () => setState(() => more = !more),
        ),
      ]),
    );
  }
}

I don't know the length of the text that will be overflowed. — meditat, May 24 '20 at 20:21

How to show a more text at the end in place of TextOverflow.ellipsis inFlutter?

2 Answers2