Home > Enterprise >  How to adjust the margin of a Row Widget
How to adjust the margin of a Row Widget

Time:10-22

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),
  • Related