How To Change Flutter Text Line Height
Flutter text line height customization. In this Flutter post, we will be changing the line height of Flutter text and understanding it using a step by step implementation so we both can have a proper understanding of how to do it. We will explain Flutter text line height in detail so you don’t face any problems related to the customization of Flutter text line height. So what are we waiting for, let’s jump right into it.
Outline
- What is Flutter Text Line Height?
- Default Flutter Text Line Height
- Change Flutter Text Line Height
- Flutter Text Line Height Customization Source Code
- Conclusion
What is Flutter Text Line Height?
So what Flutter text line height really is and what is it used for? To understand Flutter text line height, we have to have a long Flutter text so it is covered using multi lines. Flutter text line height is actually used to make a distance between those lines. Let’s understand it using a proper Flutter example for better understanding.
Default Flutter Text Line Height
In order to see the default Flutter text line height, we have to implement a simple Flutter text widget with some long text so it can shown on multiline. See the below code:
Text(
'This is the default Flutter text height. .....,',
)
In the image above, you can see the default Flutter text line height which the the distance between each line. I have used more text and can be seen in the above image but I have removed some of the text from the above code in order to avoid the bulkiness of code.
Change Flutter Text Line Height
In order for you to change the Flutter text line height, first you must use the style constructor of the Flutter text widget and pass it the text style class and then by using the height constructor of the text style class, you can easily change the Flutter text line height. This height constructor takes a double(decimal) value but an integer can also be accepted(it will convert it automatically). For demonstration, we have passed it a height of 3 and also we have removed some of the repeating text from code to remove bulkiness. See the below code:
Text(
'This is the custom Flutter text height...This is the custom Flutter text height.',
style: TextStyle(height: 3)
)
The Flutter text line height is changed as seen in the above image.
So you can easily customize line height of Flutter text by following the above mentioned steps.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(
'This is the custom Flutter text height...This is the custom Flutter text height.',
style: TextStyle(height: 3),
)),
)));
}
}Conclusion
To conclude, you now have an in depth practical implementation knowledge of how to change Flutter text line height and I hope you will easily customize Flutter text line height in your own Flutter apps. Thank you for reading this article.
