Flutter text overflow new line

Advertisements

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 :

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.

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

Leave a ReplyCancel reply