skip to Main Content

enter image description here

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              CircleAvatar(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(title, overflow: TextOverflow.ellipsis),
                  Text(part),
                ],
              ),
            ],
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }

The overflow property of the text widget doesn’t work.

Wrapping the widget with flexible and expanded doesn’t work either.

How should I handle text overflow when there is another row within a row?

What I want is for the text to be longer so that when it encounters a button, …the text is processed in front of the button.


First try

Wrapping a row widget with flexible doesn’t work.

enter image description here

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Row(
              children: [
                CircleAvatar(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, overflow: TextOverflow.ellipsis),
                    Text(part),
                  ],
                ),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }

Second try

If I replace a Row within a Row with a Wrap widget and then wrap the Wrap widget with Flexible, the text is pushed to the bottom line.

enter image description here

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Wrap(
              children: [
                CircleAvatar(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, overflow: TextOverflow.ellipsis),
                    Text(part),
                  ],
                ),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }

2

Answers


  1. You don’t need two rows, use this code:

                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        CircleAvatar(),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(title, overflow: TextOverflow.ellipsis),
                              Text(part),
                            ],
                          ),
                        ),
                        ElevatedButton(onPressed: () {}, child: Text('btn')),
                      ],
                    ),
                  ),
    

    result:

    enter image description here

    Login or Signup to reply.
  2. You need to wrap the inner Row and Column with Expanded to get available space(constrains).

     Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              children: [
                CircleAvatar(),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(title, overflow: TextOverflow.ellipsis),
                      Text("part"),
                    ],
                  ),
                ),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    ),
    

    More about ayout/constraints.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search