How to fill contents inside wrap widget? - flutter

Question

I want to move widgets to the new line automatically if it's overflow and Wrap widget is a good way for this.
so I have some wrap widgets which have width based on text length and some icons like:
Current actual:
I want to align 2 icons on the left and right side of the parent.
but as you can see the red-colored area of Row, I don't know how to make Row width match to the parent when Text widget has longer than Row (in the above case of the attached image, something?)
This is what I expect:
and my current code is:
Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.start,
children: [
Container(
child: Column(
children: [
Text(
"hoge",
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Container(
child: Column(
children: [
Text(
"too long text...............",
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Container(
child: Column(
children: [
Text(
"hoge",
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
],
),
How to achieve this?

Answer 1

IntrinsicWidth(
child: Column(
children: [
Text(
"too long text...............",
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Wrap your long text Column with IntrinsicWidth instead of normal Container Widget.moreover, remove the mainAxisSize constraint on the Row widget to make it's width same as Text widget.
https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html

Answer 2

I think this is what you're looking for List of Containers side by side
I made it dynamic so that you can add new items if you want base on the list of Item.
class Item {
String text;
IconData icon1;
IconData icon2;
Color color;
Item({ this.text, this.icon1, this.icon2,this.color,});
}
We can make this dynamic by creating a List of Item
final List<Item> item = [
Item(
text: 'Item 3',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.blue,
),
Item(
text: 'Item 2 This text is too long for the screen width..... screen width.....screen width.....screen width.....',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.greenAccent,
),
Item(
text: 'Item 3',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.amberAccent[100],
),
];
You might also want to look at Wrap Class
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: item.map((Item) {
return GestureDetector(
child: Container(
decoration: BoxDecoration(
color: Item.color,
),
margin: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(Item.text),
Wrap(
children: <Widget>[
Icon(Item.icon1),
Icon(Item.icon2),
],
)
],
),
),
onTap: () => {},
);
}).toList(),
),