Flutter: Wrap & Column for displaying multiple icons vertically

Question

I am trying to build a vertical list of icons. I decided to use Wrap & Column widgets for that. However, the spacing between the icons is too big. I did use spacing, but it doesn't seem to help. Any thoughts on how I can make spacing smaller?

child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Padding( padding: const EdgeInsets.all(10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container(child: Text('Title')), Container(child: Text('Category')), ], ), ), Wrap( direction: Axis.vertical, spacing: 1, runSpacing: 1, children: <Widget>[ IconButton( icon: Icon(Icons.check), iconSize: 14, onPressed: null, ), IconButton( icon: Icon(Icons.star_outline), iconSize: 14, onPressed: null, ), IconButton( icon: Icon(Icons.delete_outline), iconSize: 14, onPressed: () => deleteTx(tx.id), ), ], ), ], )

enter image description here

b442 · Accepted Answer · 2021-08-30 20:18:27Z

Yeah, you can

Just put 'em in containers and set to each height, for example - 20

Here your container with mods

Wrap( direction: Axis.vertical, spacing: 1, runSpacing: 1, children: <Widget>[ Container( height: 20, child: IconButton( icon: Icon(Icons.check), iconSize: 14, onPressed: null, ), ), Container( height: 20, child: IconButton( icon: Icon(Icons.star_outline), iconSize: 14, onPressed: null, ), ), Container( height: 20, child: IconButton( icon: Icon(Icons.delete_outline), iconSize: 14, onPressed: () {}, ), ), ], ),

but i advice to you read more about adaptive widgets such Flex, Flexible and others

Lakshya Punhani · Accepted Answer · 2021-08-30 20:09:33Z

You should provide a height for icons to space evenly in only that height. Try this.

Container( padding: EdgeInsets.all(10), height: 200, child: Card( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container(width: 10,color: Colors.purple), Expanded( child: Padding( padding: const EdgeInsets.all(10.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container(child: Text('Title')), Container(child: Text('Category')), ], ), ), ), Container( height: double.infinity, child: Wrap( crossAxisAlignment: WrapCrossAlignment.end, alignment: WrapAlignment.spaceBetween, direction: Axis.vertical, spacing: 1, runSpacing: 1, children: <Widget>[ IconButton( icon: Icon(Icons.check), iconSize: 14, onPressed: null, ), IconButton( icon: Icon(Icons.star_outline), iconSize: 14, onPressed: null, ), IconButton( icon: Icon(Icons.delete_outline), iconSize: 14, onPressed: null, ), ], ), ), ], ), ), )

Collectives™ on Stack Overflow

Flutter: Wrap & Column for displaying multiple icons vertically

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related