top of page

[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')
    ],
  )
)



Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page