CODEWITHSUNDEEP
flutter
Max Luchterhand
Max Luchterhand

Reputation: 498

Need help laying out a text and a separator widget in a row so that the separator has a min width and expands when the text does not fill out the row

I have a row with a text and a separator widget. The separator widget should have a min width, and expand if the text widget does not fill out the remaining width of the row. The text widget should overflow and show and ellipsis if it does not fit in the remaining width of the row (total width - min separator width).

How can I achieve this behavior on Flutter?

enter image description here

Upvotes: 1

Views: 125

Answers (1)

Joshua Lin
Joshua Lin

Reputation: 86

Edit on 2021/06/26

OK I figure something out, it's a little more complex but it worked as requirement, you can set minimum width on separator.

  Widget _row(String text, int number) => Row(
        children: [
          Expanded(
            child: Stack(
              alignment: Alignment.centerLeft,
              children: [
                Container(height: 2, color: Colors.black),
                Container(
                  color: Colors.white,
                  child: Text(
                    text,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
          Container(width: 60, height: 2, color: Colors.black),
          Container(
            width: 40,
            alignment: Alignment.centerRight,
            child: Text(number.toString()),
          ),
        ],
      );

Not sure if it is possible to put min width on separator as you wanted, but it'll be a lot easier if you put max width on Text:

Widget _row(String text, int number) => Row(
      children: [
        ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 300),
          child: Text(
            text,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Expanded(
          child: Container(height: 2, color: Colors.black),
        ),
        Text(number.toString()),
      ],
    );

Upvotes: 1

Related Questions