CODEWITHSUNDEEP
flutterdartflutter-layout
alex jasper
alex jasper

Reputation: 73

Set spacing between two lines of text

I am trying to set spacing between two lines of text, but am not able to. Right now, the two lines are rendering after each other, but i want a bit of spacing between that i can adjust. I have tried using the Spacer widget but this makes the spacing too large. Is there a better way to do this? 

        Expanded(
          child: Column(
            children: <Widget>[
              Text("We're finding your pizza.",
                  style: theme.textTheme.body1.copyWith(fontSize: 18)),
              Text(
                  "We'll send you a notification.",
                  textAlign: TextAlign.center,
                  style: theme.textTheme.body1.copyWith(fontSize: 18)),
            ],
          ),
        ),

Upvotes: 1

Views: 6189

Answers (3)

Ivan Yoed
Ivan Yoed

Reputation: 4395

You can also set a specific padding between text lines by setting the height property in the TextStyle. With this you set the height for each line.

                  Text(
                    "Let's make\nsome pancakes",
                    style: TextStyle(
                      height: 1.2, //SETTING THIS CAN SOLVE YOUR PROBLEM
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w300,
                    ),
                    textAlign: TextAlign.center,
                  ),

In fact, we can confirm from the docs that:

For most fonts, setting height to 1.0 is not the same as omitting or setting height to null because the fontSize sets the height of the EM-square, which is different than the font provided metrics for line height.

For more info: https://api.flutter.dev/flutter/painting/TextStyle/height.html

I posted this same answer at Flutter how do I remove unwanted padding from Text widget? to get the opposite result but it works the same way.

Upvotes: 3

Kothai
Kothai

Reputation: 125

you can simply use the SizedBox widget or Container widget with padding.

SizedBox(height: 15.0)

or

Container( padding: const EdgeInsets.all(15.0))

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267404

Spacer will take up all the available spaces left, and you may not need this. So you can simply use SizedBox widget. 

Text("One"),
SizedBox(height: 20), // use this
Text("Two"),

Upvotes: -1

Related Questions