I am trying to wrap text (multi line) followed by "Read More" in a Row widget.

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. Read More...

I tried using row widget (Read More) it's overflowing to next line.

Just want to show the readmore text followed by the content without overflowing to next line. on clicking read more i am showing bottommodelsheet.

Please help..

CodePudding user response：

You can use RichText instead of Row:

RichText(
                text: TextSpan(
                  style: TextStyle(color: Colors.black),
                  children: <TextSpan>[
                    TextSpan(
                      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.",
                    ),
                    TextSpan(
                      text: 'Read more!',
                      style: TextStyle(fontWeight: FontWeight.bold),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          print('Read more click');
                          // what you wnat when click more
                        },
                    ),
                  ],
                ),
              ),

CodePudding user response：

You can use readmore package for this.

ReadMoreText(
  "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.",
  trimLines: 2,
  colorClickableText: Colors.pink,
  trimMode: TrimMode.Line,
  trimCollapsedText: 'Show more',
  trimExpandedText: 'Show less',
  moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
);

CodePudding user response：

To do this simply add a package readmore: ^2.1.0.

In your .dart file import import 'package:readmore/readmore.dart';

Use this code to adjust automatically height of container

Container(
                        margin: const EdgeInsets.only(
                          top: 30,
                          left: 10,
                          right: 10,
                          bottom: 40.0,
                        ),
                        color: Colors.transparent,
                        child: ReadMoreText(
                          'your_text',
                          trimLines: 4,
                          colorClickableText: Colors.pink,
                          trimMode: TrimMode.Line,
                          trimCollapsedText: 'Show more',
                          postDataTextStyle: TextStyle(
                            color: Colors.blue,
                          ),
                          style: TextStyle(
                            fontFamily: 'Avenir',
                            color: Colors.black,
                          ),
                          trimExpandedText: 'Show less',
                          lessStyle: TextStyle(
                            fontFamily: 'Avenir',
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.blue,
                          ),
                          moreStyle: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        width: MediaQuery.of(context).size.width,
                      ),