I have a following widget on web:

enter image description here

The code behind this is following:

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(right: 20),
            child: Text(
              'Some name here',
              style: Theme.of(context).textTheme.headline5,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          const Spacer(),
          Text(
            'Uses count:',
            style: Theme.of(context).textTheme.subtitle2,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(width: 8),
          Text(
            '4',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          const SizedBox(width: 16),
          Text(
            'Attachments count:',
            style: Theme.of(context).textTheme.subtitle2,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(width: 8),
          Text(
            '0',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          // const SizedBox(width: 30),
          OutlinedButton(
            onPressed: () {},
            child: Text('Some action'),
          ),
        ],
      ),
    );
  }
}

Problem description

When the free space that Spacer fills is shrinked by narrowing the web window, I want to have the 3 Text widgets ("some name here", "uses count" and "attachments count") behave in a way that all of them shrink by equal amounts and apply ellipsis to the texts.

In the current solution the ellipsis is not applied and the widget overflows in case of shrinking the window. I want to apply ellipsis to the texts.

enter image description here

Tried solutions

The closest I got is the following:

enter image description here

The problem here is that there is still available space that is filled by Spacer and the ellipsis got already applied. The ellipsis should apply only when there is no available space filled by Spacer - like in the second attached image where the overflow happens where the "Uses count" text is right at the padding.

Another problem with this solution is that the ellipsis amount is not equal between the text widgets - each text is shrinked by a different amount.

The last problem with the solution is that the items in a row are not using the full width of the row - the button should be at the right edge of the row but there is some empty space.

Here is the code snippet of this solution:

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          Flexible(
            child: Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Text(
                'Some name here',
                style: Theme.of(context).textTheme.headline5,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          const Spacer(),
          Flexible(
            child: Text(
              'Uses count:',
              style: Theme.of(context).textTheme.subtitle2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            '4',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          const SizedBox(width: 16),
          Flexible(
            child: Text(
              'Attachments count:',
              style: Theme.of(context).textTheme.subtitle2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            '0',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          // const SizedBox(width: 30),
          OutlinedButton(
            onPressed: () {},
            child: Text('Some action'),
          ),
        ],
      ),
    );
  }
}

What widgets should I combine to achieve this behaviour?


Solution 1: Abdussamet Inanç

I think it will help

Row(
    children: [
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(right: 20),
          child: Text(
            'Some name here',
            style: Theme.of(context).textTheme.headline5,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
      FittedBox(
        child: Text(
          'Uses count:',
          style: Theme.of(context).textTheme.subtitle2,

        ),
      ),
      const SizedBox(width: 8),
      Text(
        '4',
        style: Theme.of(context).textTheme.bodyText1,
      ),
      const SizedBox(width: 16),
      FittedBox(
        child: Text(
          'Attachments count:',
          style: Theme.of(context).textTheme.subtitle2,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      const SizedBox(width: 8),
      Text(
        '0',
        style: Theme.of(context).textTheme.bodyText1,
      ),
      // const SizedBox(width: 30),
      OutlinedButton(
        onPressed: () {},
        child: Text('Some action'),
      ),
    ],
  )

Preview