I want to display a row that has the following content:
- Aligned to the left of the row: an icon and a text inside a container. NB: I don’t want to use the standard Chip() widget.
- Aligned to the right of the row: a button.
If the width of the screen is to small, the text has to be clipped (ending with ellipsis).
If there’s enough screen width, then 1) and 2) should only take the space they need; not taking the full available space. In other words, the space between 1) and 2) should be empty.
I prefer not to use the IntrinsicWidth for performance reasons.
The following code example is made for test purposes:
<code>import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
<code>import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
The result is this:
That looks ok. But when I have more screen width it looks like this:
That’s not what I want. The button should be aligned to the right.
I’ve tried solving it with using a Spacer() in between the container and the button. I then get this:
The result is that the Spacer() takes too much space. There’s enough space for the text, but unfortunately it’s now clipped.
How can I solve this?
just add mainAxisAlignment: MainAxisAlignment.spaceBetween, to first Row
<code>class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
<code>class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
4
Use Expanded for that purpose. In the Row where to button is, wrap the Container within Expanded like this:
<code>class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
// add Expanded here
Expanded(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
<code>class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
// add Expanded here
Expanded(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
// add Expanded here
Expanded(
child: Container(
color: Colors.yellow,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
2
If I got you right you want something like that:
<code>import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Row(
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
<code>import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Row(
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
</code>
import 'package:flutter/material.dart';
class MyLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Row(
children: [
Icon(Icons.info),
Flexible(
child: Text(
'This text might be clipped',
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
),
],
);
}
}
That will force your text to fill as much space as it can.
2