Flutter – Text Align
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 then 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 align text. Here we will use the Text class textAlign property to align text in a flutter application.
The Text class textAlign property is used to set how the text should be aligned horizontally. The textAlign property value is a constant from the TextAlign enumeration.
The TextAlign enumeration determines whether and how to align text horizontally. The TextAlign enumeration has several possible values such as left, right, center, justify, start and end. The fluter developers have to pass the textALign property value as like TextAlign.center constant.
The TextAlign.center constant aligns the text in the center of the container. The TextAlign.justify constant stretch lines of text that end with a soft line break to fill the width of the container. Lines that end with hard line breaks are aligned towards the start edge.
The TextAlign.end constant aligns the text on the trailing edge of the container. The TextAlign.right constant aligns the text on the right edge of the container.
So finally, the flutter app developers can align the Text widget text by using the Text class textALign property. They just have to pass the specified TextAlign enumeration value to the textAlign property. Such as to center align the text in a Text widget, the flutter developers have to pass the TextALign.center constant value to the Text class’s textALign property.
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter - Text Align")
),
body: const Center(
child: Text(
"Lorem Ipsum is simply dummy text of the printing"
" and typesetting industry.",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 24),
),
)
),
)
);
}
More flutter tutorials
- flutter – Full screen display
- flutter – Container content alignment
- flutter – Container padding and margin
- flutter – Container full width
- flutter – How to change Text underline thickness
- flutter – Space between Text and underline
- flutter – How to add shadow to the Text
- flutter – Gradient Text
- flutter – Text gradient background
- flutter – How to set Text letter spacing
- flutter – How to change ElevatedButton size
- flutter – How to change ElevatedButton splash color
- flutter – MaterialStateProperty size
- flutter – How to create rounded corners ElevatedButton
- flutter – ElevatedButton border radius only
Flutter Tutorials 