Question 75860 in Flutter Question posted in
The official Flutter documentation can be found here.

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

4

Answers


  1. 0

    Wrap the Text widget with a Flexible or Expanded widget to use a numbers of row > 1

    Flexible(
    child: Text("Test it with a long text"),
);

    This is the official doc https://flutter.dev/docs/development/ui/layout#lay-out-multiple-widgets-vertically-and-horizontally on how to arrange widgets.

    Remember that Flexible and also Expanded, should only be used within a Column, Row or Flex, because of the Incorrect use of ParentDataWidget.

    Login or Signup to reply.
  2. 0

    You need to embed your Column in an Expanded widget, otherwise it does not know how wide it can be:

    Card(
    ...,
    child: Padding(
      ...,
      child: Row(
        children: <Widget>[
          // HERE!
          Expanded(
            child: Column(
              ...,
              children: <Widget>[
                Text(),
                Text(),
              ],
            ),
          ),
        ],
      ),
    ),
  )
    Login or Signup to reply.
  3. 0

    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,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
    Login or Signup to reply.
  4. 0

    You need to wrap with Expanded or Flexible widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search