Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the gap above and below the text on flutter

I am trying to put the text "Hello" right below the "123", but the bigger the text is, the bigger the gap. How do I remove the gap??? Flutter images are added below.

enter image description here

enter image description here

like image 504
Ateyib Abdulkadir Avatar asked Dec 30 '18 04:12

Ateyib Abdulkadir


Video Answer


2 Answers

The only way I could find so far is to reduce height property, the problem though is that it reduces the gap above only. So in your case, you could try to set it for hello text to the minimum:

Text(
   '123',
    style: TextStyle(fontSize: 60.0),
),
Text(
   'hello',
    style: TextStyle(fontSize: 10.0, height: 0.1),
),
like image 159
Oleg Khalidov Avatar answered Sep 29 '22 13:09

Oleg Khalidov


Use Stack widget to align your text widgets

Stack(
      children: <Widget>[
        Text(
          '123',
          style: TextStyle(fontSize: 60.0),
        ),
        Positioned(
          child: Text('Hello'),
          bottom: 0.0,
          left: 35.0,
        )
      ],
    ),

Hope it helps!

like image 44
Shyju M Avatar answered Sep 29 '22 12:09

Shyju M