CODEWITHSUNDEEP
flutter
Dolphin
Dolphin

Reputation: 38985

how to auto expand when text is too long in Row in flutter

Now I am using this code to show text in flutter, this is my code:

Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 8, bottom: 8.0),
                    child: Text(
                      item.subName,
                      softWrap: true,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ],
              ),

sometimes the text item.subName is too long, how to make it auto expand or render in new line when the text overflow? I have tried to add this but still not work:

 softWrap: true,

This is the error:

enter image description here

Upvotes: 4

Views: 5975

Answers (4)

Md. Shahinur Rahman
Md. Shahinur Rahman

Reputation: 1

We can use the Expanded text to show the first time 2 line and when click on the text it shows all the text.

import 'package:flutter/cupertino.dart';

class ExpandableText extends StatefulWidget {
final String text;
final TextStyle textStyle;

const ExpandableText({Key? key,
required this.text,
required this.textStyle,
}) : super(key: key);

@override
ExpandableTextState createState() => ExpandableTextState();
}

class ExpandableTextState extends State<ExpandableText> {
bool isExpanded = false;

@override
Widget build(BuildContext context) {
return GestureDetector(
  onTap: () {
    setState(() {
      isExpanded = !isExpanded;
    });
  },
  child: Text(
    widget.text,
    style: widget.textStyle,
    maxLines: isExpanded ? null : 2,
    overflow: isExpanded ? null : TextOverflow.ellipsis,
  ),
);
}
}

Use this ExpandedText:

ExpandableText(
        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",
        textStyle: const TextStyle(color: Colors.black),
      ),

Upvotes: 0

Ivan Krupik
Ivan Krupik

Reputation: 137

Widget build(BuildContext context){
    final size = MediaQuery.of(context).size;

    Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: size.width * 0.4, // Choose a number that works for you
                        child: Text(
                          item.subName,
                          softWrap: true,
                          overflow: TextOverflow.clip,
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),

Upvotes: 1

Sanket
Sanket

Reputation: 272

Row(
         children: <Widget>[
            Expanded(
               child: new Text("your text"))
                ],
        )

Upvotes: 3

Ashok
Ashok

Reputation: 3611

Try this

new Container(
       child: Row(
         children: <Widget>[
            Flexible(
               child: new Text("sample text"))
                ],
        ));

Upvotes: 14

Related Questions