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.
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. .....,This is the default Flutter text height.', )
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) )
Flutter Text Line Height Customization Source Code
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. I would love to have your feedback. I also have written other informative posts on remarkable Flutter templates with free code source, Flutter widgets, Flutter animations, Flutter app development, and many more. Thank you for reading this article.
