Flutter – Set Text word spacing
The Text widget displays a string of text with a single style in a flutter app. But depending on the layout constraints the string might break across multiple lines or might all be displayed on the same line. The style argument is optional in a Text instance. When the style argument is omitted, the text will use the style from the closest enclosing DefaultTextStyle. By default, the Text is not selectable. But flutter developers can make a Text selectable by wrapping a subtree with a SelectionArea widget.
The following flutter application development tutorial will demonstrate how we can set or change the Text word spacing. In this example code, we will increase the text word spacing instead of the default text word spacing. That means we will increase the gap between the Text widget’s text’s each word.
In this flutter application, we will assign a TextStyle instance for the Text widget’s style property. Then we will use the TextStyle class’s wordSpacing property to set the word spacing of the Text widget’s text.
The Text class’s style property value is a TextStyle object. The TextStyle class represents an immutable style describing how to format and paint text.
The TextStyle class’s wordSpacing property value is a Double instance which is the amount of space (in logical pixels) to add at each sequence of white space as an example between each word. If the flutter developers want to bring the words closer then they can pass a negative value to this wordSpacing property.
So finally, the flutter app developers can set or change the Text widget’s text word spacing using the TextStyle class wordSpacing property.
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter - Text Word Spacing")
),
body: const Center(
child: Text(
"Lorem Ipsum is simply dummy text of the printing"
" and typesetting industry.",
style: TextStyle(
fontSize: 25,
backgroundColor: Colors.black12,
wordSpacing: 15
),
textAlign: TextAlign.center,
)
),
),
)
);
}
More flutter tutorials
- flutter – Animated align
- flutter – Align example
- flutter – Align exact position
- flutter – How to change status bar color
- flutter – How to hide status bar
- flutter – Text decoration style
- flutter – How to change Text underline color
- flutter – How to draw a line through the Text
- flutter – How to set Text line height
- flutter – How to overline Text
- flutter – How to draw Text outline
- flutter – How to set Text background color
- flutter – Text with emoji
- flutter – Single line Text
- flutter – Text overflow
Flutter Tutorials 