Flutter 带有两个两个文本小部件的行小部件没有相互跟随

Question

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

Answer 1

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

Answer 2

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,
                      ),

Answer 3

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