Flutter Set Text Alignment Example - Center Justify

Text alignment is to align the text in horizontal manner. In flutter there are 6 types of Text alignment available Center, justify, left, right, start and end. To set text alignment in flutter we have to use textAlign property of text and pass the desired alignment. We will learn about all of them in our today's tutorial.

Flutter Text Alignment Example - Center Justify Left Right Start End:

1. Center text alignment: To set center text alignment in flutter we have to use TextAlign.center on text. It aligns the text widget at the center of its root container.

Text(
          'Lorem Ipsum is simply dummy text with TextAlign Center.',
          style: TextStyle(fontSize: 30, color: Colors.blue),
          textAlign: TextAlign.center,
        ),

Screenshot:

2. End text alignment: To set end text alignment we have to use TextAlign.end . It aligns the text at the end of its root container. When we use left to right text with TextDirection.ltr then it will push text to right side. If we set TextDirection.rtl on text then it will push the text to left side.

   Text(
          'Lorem Ipsum is simply dummy text with TextAlign End',
          style: TextStyle(fontSize: 30, color: Colors.red),
          textAlign: TextAlign.end,
        ),

Screenshot:

3. Justify text alignment: To set justify text alignment in flutter we would use TextAlign.justify . It stretches the text softly so the text can fit in its container.

      Text(
          'Lorem Ipsum is simply dummy text with TextAlign Justify.',
          style: TextStyle(fontSize: 30, color: Colors.brown),
          textAlign: TextAlign.justify,
        ),

Screenshot:

4. Left text alignment: To set left text alignment we have to use TextAlign.left property on Text.

Text(
          'Lorem Ipsum is simply dummy text with TextAlign Left.',
          style: TextStyle(fontSize: 30, color: Colors.indigo),
          textAlign: TextAlign.left,
        ),

Screenshot:

5. Right text alignment: To set right text alignment in flutter we have to use TextAlign.right .

Text(
          'Lorem Ipsum is simply dummy text with TextAlign Right.',
          style: TextStyle(fontSize: 30, color: Colors.green),
          textAlign: TextAlign.right,
        ),

Screenshot:

6. Start text alignment: To set right text alignment we have to use TextAlign.start. Push text to left side of root container if we defines TextDirection.ltr for left to right text. If we define TextDirection.rtl the it push the text to right side for right to left text.

   Text(
          'Lorem Ipsum is simply dummy text with TextAlign Start.',
          style: TextStyle(fontSize: 30, color: Colors.purple),
          textAlign: TextAlign.start,
        ),

Screenshot:

7. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Column(children: [
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign Center.',
          style: TextStyle(fontSize: 30, color: Colors.blue),
          textAlign: TextAlign.center,
        ),
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign End',
          style: TextStyle(fontSize: 30, color: Colors.red),
          textAlign: TextAlign.end,
        ),
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign Justify.',
          style: TextStyle(fontSize: 30, color: Colors.brown),
          textAlign: TextAlign.justify,
        ),
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign Left.',
          style: TextStyle(fontSize: 30, color: Colors.indigo),
          textAlign: TextAlign.left,
        ),
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign Right.',
          style: TextStyle(fontSize: 30, color: Colors.green),
          textAlign: TextAlign.right,
        ),
        Text(
          'Lorem Ipsum is simply dummy text with TextAlign Start.',
          style: TextStyle(fontSize: 30, color: Colors.purple),
          textAlign: TextAlign.start,
        ),
      ]))),
    );
  }
}

Screenshot of app: