[flutter/dart]Adjust Text margins

Overview

When creating the UI of an app with flutter, the alignment of Text and other widgets may appear to be slightly out of alignment. Here's how to adjust this.

Details

The Text widget contains not only characters but also spaces above, below, left and right. For example, when aligning the top edges, the top edge of this blank is aligned with the top edge of other widgets, so the top edges of characters and the top edges of other widgets are not aligned.

Container(
    margin: const EdgeInsets.only(top:20, left:20),
    child:Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      child:CircleAvatar(
        child: Icon(Icons.person),
      ),
      SizedBox(width: 10,),
      Text('test')
    ],
  )
)

The top edge of the icon and the top edge of the character are slightly out of alignment

The white space in Text comes from typography. See here for details.

Solution

As you can see on Stack Overflow above, this space cannot be removed.

If you want to align accurately like this time, I think the quickest way is to add padding to the widget that is not Text and do your best to adjust it.

Container(
    margin: const EdgeInsets.only(top:20, left:20),
    child:Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        padding: const EdgeInsets.only(top: 2),　　//←here！
        child:CircleAvatar(
          child: Icon(Icons.person),
        )
      ),
      SizedBox(width: 10,),
      Text('test')
    ],
  )
)