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?
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.
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 ));
There are two approaches to do this. Using FitterdBox, Wrap the Text Widget into FittedBox Widget with fitWidth parameter.
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.
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), )
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,
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With