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

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