Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter text overflow new line

Why overflow: TextOverflow.visible is not working? I can’t fix it. I want if it overflow jumps to new line and shows all text. I think the problem is because card is wrapped with expanded but I need expanded because I want that card fill all available space. Can you help me?

        Expanded(
          flex: 2,
          child: Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        color: const Color(0XFFB0ADE2),
                        margin: const EdgeInsets.symmetric(vertical: 5),
                        elevation: 0,
                        child: Padding(
                          padding:
                              const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                          child: Row(
                            children: <Widget>[
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    'text',
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18,
                                    ),
                                  ),
                                  Text(
                                    'subText very very long sentence to fit in one row and text.overflow visible is not working properly',
                                    overflow: TextOverflow.visible,
                                    softWrap: true,
                                    style: const TextStyle(
                                      fontSize: 12,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
),

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Just try wrapping Column within Expanded, now the Row’s children understands that it can take maximum width.

Note: And if you want to limit the overflowed number of lines you can consider setting maxLine property to 2 or 3 of your choice.

enter image description here

Code structure to follow:

Row
 |_Expanded
  |_Column
    |_ Text
    |_ Text
      | maxlines: 3 // If you want to limit the overflowed number of lines

Complete code:

          body: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
              color: const Color(0XFFB0ADE2),
              margin: const EdgeInsets.symmetric(vertical: 5),
              elevation: 0,
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'text',
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                            ),
                          ),
                          Text(
                            'subText very very long sentence to fit in one row and text.overflow visible is not working properly',
                            overflow: TextOverflow.visible,
                            softWrap: true,
                            maxLines: 2,
                            style: const TextStyle(
                              fontSize: 12,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading