Minal Suryawanshi
Minal Suryawanshi

Reputation: 91

For ListView how to optimize text inside it when it is too longer in flutter?

For below widget how to optimise Text() widget further when there is longer text included TextOverflow.ellipsis is not working for it.There is combination Column,Row,Listview in my code.How should I optimise text for longer text I have tried using Expanded,Flexible,FittedBox but getting confused how and when to use it.

enter image description here

Widget builddoc(Document doc) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) =>
                    DocumentsDetails(doc.docId, this.userName)));
      },
      child: Padding(
        padding: const EdgeInsets.all(6),
        child: Container(
          height: MediaQuery.of(context).size.height * 0.09,
          width: MediaQuery.of(context).size.width * 2,
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
                side: BorderSide(
                  color: Color.fromARGB(255, 253, 153, 33),
                )),
            borderOnForeground: true,
            color: Colors.white,
            elevation: 5,
            child: ListView(
              physics: NeverScrollableScrollPhysics(),
              children: [
                Padding(
                  padding: const EdgeInsets.all(5),
                  child: Flexible(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Icon(
                          Icons.file_copy_rounded,
                          color: Color.fromARGB(255, 253, 153, 33),
                          size: 20,
                        ),
                        Padding(
                          padding: const EdgeInsets.all(7),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '${doc.docTitle}',
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 253, 153, 33),
                                      fontSize:
                                          (SizeConfig.screenWidth ?? 0) * 0.033,
                                    ),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                  SizedBox(
                                    height: 5,
                                  ),
                                  Text(
                                    '${doc.tokenNo}',
                                    style: TextStyle(
                                        color:
                                            Color.fromARGB(255, 253, 153, 33),
                                        fontSize: 1.5 *
                                            MediaQuery.of(context).size.height *
                                            0.01),
                                  )
                                ],
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                            child: SizedBox(
                          width: MediaQuery.of(context).size.width * 0.3,
                        )),
                        AutoSizeText('${doc.docStatus}',
                            style: TextStyle(
                                color: Color.fromARGB(255, 253, 153, 33),
                                fontSize: 1.5 *
                                    MediaQuery.of(context).size.height *
                                    0.01)),
                        Icon(
                          Icons.arrow_right_sharp,
                          color: Color.fromARGB(255, 253, 153, 33),
                          size: 25,
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );

Upvotes: 0

Views: 244

Answers (1)

You should use Expanded or Flexible widget for see all text or you can try Maxlines and textOverFlow in Text Widget.

Upvotes: 1

Related Questions