Text widget overflow in row not clipping properly

Question

I am building a widget in flutter and am attempting to display two text widgets in a row with spacing in between them so that each text widget is aligned at the end of the row. Sometimes these two text widgets are too large to occupy the row together, therefore I need to clip one widget to prevent overflow. I am trying to produce this effect using the "Spacer" package, however my output is not what is expected.

Output

Expected

Code

gridview

Expanded(
    child: GridView.count(
  childAspectRatio: 100.w * 1.65 / 100.h,
  crossAxisCount: 2,
  controller: viewModel.controller
    ..addListener(() {
      viewModel.handleScrolling(
         viewModel.controller, viewModel.focusNode);
    }),
  children: <Widget>[
    for (final listing in viewModel.results) ...[
      ListingCard(
        listing: listing
    ],
  ],
)),
*this lives within a column*

listingcard

Widget build(BuildContext context) {
  return Card(
    child: InkWell(
        onTap: () {},
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                Padding(
                    padding: EdgeInsets.symmetric(horizontal: 1.5.w),
                    child: Row(children: [
                      Padding(
                          padding: EdgeInsets.only(right: 1.5.w),
                          child: (listing.listingType == 'Percentage')
                              ? Text('${listing.price!.toInt()}% off',
                                  maxLines: 1,
                                  style: TextStyle(
                                      fontSize: 8.sp,
                                      fontWeight: FontWeight.w700))
                              : Text("\$ ${listing.price.toString()}",
                                  maxLines: 1,
                                  style: TextStyle(
                                      fontSize: 8.sp,
                                      fontWeight: FontWeight.w700))),
                      const Spacer(),
                      Text("${listing.brand}",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                              fontSize: 8.sp, fontWeight: FontWeight.w400))
                    ]))
            ],
    )))
  }
}

Any help would be much appreciated, thanks!

Attempts to fix:

Wrapping the 2nd Text Widget (brand) with Expanded & Flexible

Both of these outputs are Identical. The issue being that the Spacer flexible space takes precedent over the wrapped text, producing a fixed gap, which I want to be dynamic.

Answer 1

Try to wrap your overflowing text with Expanded .

This tells Flutter that that Text widget will take as much space as possible, which implies that the ellipsis will take effect.

EDIT. I am unable to play around with it at the moment, but try it with Flexible , too, if possible, as this shouldn't force anything on the layout.

Answer 2

Try remove spacer beetween these two widgets and set mainAxisAlignment in Row to get dynamic gap:

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: ...
);

Hope this helps.

Answer 3

Wrap your brand text with Expanded widget and provide textAlign: TextAlign.right

Padding(
  padding: EdgeInsets.symmetric(horizontal: 1.5),
  child: Row(
    children: [
      Padding(.....),
      Expanded(
        child: Text(
            "{listing.ssssssssssssssssssssssssssssssssssssbrand}",
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.right,
            maxLines: 1,
            style: TextStyle(
                fontSize: 18, fontWeight: FontWeight.w400)),
      )
    ],
  ),
)

Answer 4

check this is for row overflowed fixed

Padding(
              padding: EdgeInsets.symmetric(horizontal: 1.5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Flexible(
                    child: Text("succefull",
                        maxLines: 1,
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w400)),
                  ),
                  SizedBox(height: 10),
                  Flexible(
                    child: Text(
                        "succefuldfgdgjhhjkhkjhjkhkjshkjdsajkdhkjashdkjhakjfdhakjfhdjkasfjkhajksfbkjsbfl",
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w400)),
                  ),
                  SizedBox(height: 10),
                  Row(
//                   crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Flexible(
                        child: Text("\$ 343.45",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.w400)),
                      ),
                      SizedBox(width: 10),
                      Flexible(
                        child: Text(
                            "{listing.sssssssdsfsdfsdfdsdfssdssdsadggjgjkjkgjkgjkgjkk222222222222222jhjkhjkhjkhjkhjhkjhjkhjkhkjhkjhkjhkjhkjhkjssjkhkhlkhllkjlkjklkljlkjlkjkljkl}",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.w400)),
                      )
                    ],
                  ),
                ],
              ),
            ),