how display small portion of text from big text flutter?

Question

Acutal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras efficitur orci massa, non mattis nunc laoreet porta. Maecenas purus lacus, consectetur ac lorem et, pulvinar venenatis neque. Quisque hendrerit sagittis rutrum. Sed et suscipit elit. Donec in lectus in nisi vestibulum venenatis at eu nisi. Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien.

Expected

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras...

Note

• No readmore feature

Answer 1

You can use the overflow property to get this effect

Expanded(
    child: Text(
      "Any Large Text",
      maxLines: 5,
      overflow: TextOverflow.ellipsis,
   ),
);

Make sure to wrap Text widget with Expanded.

You can also try other properties like minLines or other forms of overflow like TextOverflow.fade or TextOverflow.clip.

Answer 2

You can achieve this by using maxLines in combination with overflow attributes from Text widget.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(16),
        alignment: Alignment.center,
        child: Text(
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras efficitur orci massa, non mattis nunc laoreet porta. Maecenas purus lacus, consectetur ac lorem et, pulvinar venenatis neque. Quisque hendrerit sagittis rutrum. Sed et suscipit elit. Donec in lectus in nisi vestibulum venenatis at eu nisi. Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien.',
          maxLines: 6,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.justify,
        ),
      ),
    );
  }
}

Answer 3

String text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras efficitur orci massa, non mattis nunc laoreet porta. Maecenas purus lacus, consectetur ac lorem et, pulvinar venenatis neque. Quisque hendrerit sagittis rutrum. Sed et suscipit elit. Donec in lectus in nisi vestibulum venenatis at eu nisi. Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien.';
  
  bool readMore = false;
  
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan( //change 200 to required length
  text : text.length>200 && readMore ? text : text.substring(0,200),
    children: <TextSpan>[
      text.length > 200 ?
      TextSpan(text: readMore?
               ' Show Less' : '...Read More...', style: TextStyle(color: Colors.blue,),
              recognizer: TapGestureRecognizer()..onTap = () {
      setState((){
        readMore = !readMore;
      });
    },
              ) :null,
    ]
  ), 
      );
  }

Dartpad Screenshots