How to set Line Height Spacing on Text Widget in Flutter

In this example, we are going to show you the way to set line-height spacing in Text Widget in Flutter. You may need different spacing heights according to the applied fonts. See the example below to change line-height spacing of Text Widget:

To Set Line Height Spacing on Text Widget:

Text( 
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
  style: TextStyle( 
      fontSize: 18,
      height: 0.9, //line height 1= 100%, were 0.9 = 90% of actual line height
  ),
),

  Text( 
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
  style: TextStyle( 
      fontSize: 18,
      height: 2, //line height 200% of actual height
  ),
)

Full Code Example: 

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Line Spacing on Text"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column( 
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                
                Text( 
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
                  style: TextStyle( 
                     fontSize: 18,
                     height: 0.9, // 1= 100%, were 0.9 = 90% of actual line height
                  ),
                ),

                 Text( 
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
                  style: TextStyle( 
                     fontSize: 18,
                     height: 2, //200% of actual height
                  ),
                ),

                Text( 
                  "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ",
                  style: TextStyle( 
                    fontSize: 22,
                    height: 1.5, //150% of actual height
                  ),
                )

              ],
            ),
          )
       );
  }
}

Output Screenshot:

In this way, you can set line-height spacing on Text Widget in Flutter.

No any Comments on this Article


Please Wait...