I have this code for Row Widget here
child: Row(
children: const [
Expanded(
flex: 1,
child: Icon(
Icons.house,
size: 40,
),
),
Expanded(
flex: 9,
child: Text('HELLOHELLO'),
),
],
),
This is the result. Margin on Row
As you can see on the left side there's a margin that is too big for my preference. Is there a way to adjust it?
CodePudding user response:
The IconData
comes with some default padding which is hard-coded. You can wrap Icon with Transform
widget and translate it.
Transform.translate(
offset: Offset(-10, 0), // change based on your need
child: Icon(
Icons.house,
size: 40,
),
),
CodePudding user response:
You could wrap your Icon with padding which takes an edgeInset
Row(
children: const [
Padding(
padding: EdgeInsets.all(8.0),
child: Expanded(
flex: 1,
child: Icon(Icons.house, size: 40),
),
),
Expanded(
flex: 9,
child: Text('HELLOHELLO'),
),
],
),
ps. if you're using VsCode, you could click on the row and press Ctrl AlT R to wrap it in padding quickly.
you could be specific on how you want the padding to work.
padding: EdgeInsets.only(right: 8.0),