I have a following widget on web:
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.
Tried solutions
The closest I got is the following:
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'),
),
],
),
);
}
}