CODEWITHSUNDEEP
flutterdartflutter-layout
meditat
meditat

Reputation: 1165

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

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.

Upvotes: 0

Views: 1522

Answers (2)

Sanjay Sharma
Sanjay Sharma

Reputation: 4035

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,

Upvotes: 2

camillo777
camillo777

Reputation: 2367

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),
        ),
      ]),
    );
  }
}

Upvotes: 0

Related Questions