Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do set text line height in flutter?

So in Material Design Spec under Onboarding: here

It is specified that:

32sp line height

which is the height from the bottom of the headline text to the base line of the subhead text.

My question is how exactly can this be implemented in flutter. Are padding enough to mimic this spec? or are there other more accurate ways to do this?

Here

like image 626
Archie G. Quiñones Avatar asked Sep 29 '19 15:09

Archie G. Quiñones


People also ask

How do you change text width and height in Flutter?

Changing Font Size To change the TextField height by changing the Font Size: Step 1: Inside the TextField, Add the style parameter and assign the TextStyle(). Step 2: Inside the TextStyle(), Add the fontSize parameter and set the appropriate value. Step 3: Run the app.

How do you change text spacing in Flutter?

Text("Hello World", style: TextStyle( height: 1.2 // the height between text, default is 1.0 letterSpacing: 1.0 // the white space between letter, default is 0.0 ));

How do I make text dynamic size in Flutter?

There are two approaches to do this. Using FitterdBox, Wrap the Text Widget into FittedBox Widget with fitWidth parameter.

What is text line height?

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.


2 Answers

Yes, there is also a height property in TextStyle which allows you to manually adjust the height of the line.

Code Snippet

Text('Hey There',    style: TextStyle(height: 5, fontSize: 10), ) 

enter image description here

like image 158
Ayush Bherwani Avatar answered Sep 26 '22 18:09

Ayush Bherwani


In addition to Ayush's answer. If we look to the documentation, we can see

When height is non-null, the line height of the span of text will be a multiple of fontSize and be exactly fontSize * height logical pixels tall.

For example, if want to have height 24.0, with font-size 20.0, we should have height property 1.2

Example:

TextStyle(
      fontSize: 20.0,
      height: 1.2,
);
like image 33
awaik Avatar answered Sep 26 '22 18:09

awaik