Flutter – How to Center Align text in Text Widget?

Flutter – Center Align Text in Text Widget

Use the textAlign property with TextAlign.center to center the lines inside a Flutter Text widget.

The alignment is visible when the Text widget has more horizontal space than its text requires, especially when a sentence wraps across multiple lines.

To center align the text in a Text widget, provide textAlign property with value TextAlign.center.

Text(
	'Hello World!',
	textAlign: TextAlign.center,
)

How TextAlign.center Works in Flutter

TextAlign.center aligns each rendered line of text at the horizontal center of the width available to the Text widget. It does not move the entire widget to the center of its parent.

This distinction matters because Flutter handles text alignment and widget positioning separately:

• textAlign: TextAlign.center centers the text lines inside the widget’s available width.
• Center positions the entire Text widget at the center of its parent.
• Align positions the widget at a selected point within its parent.

Example – Center Align Text in Text Widget

In this example, create a basic Flutter Application and replace main.dart with the following code.

lib\main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('Flutter Tutorial'),
          ),
        ),
        body: Center(
          child: Text(
            'Hello World! Welcome to TutorialKart for this awesome Flutter Tutorial on Text widget.',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

The outer Center widget places the Text widget in the middle of the body. The textAlign: TextAlign.center setting then centers the individual lines when the message wraps.

Screenshot

Center Multiline Text Across the Available Width

Give the Text widget a defined width when you want its centered alignment to be clearly visible. The following example constrains the text to 280 logical pixels, causing the sentence to wrap and each line to be centered.

const SizedBox(
  width: 280,
  child: Text(
    'Flutter centers every line of this message within the available width.',
    textAlign: TextAlign.center,
  ),
)

Without an appropriate width constraint, a short Text widget may be only as wide as its content. In that case, left, right, and center alignment can appear identical.

Center Flutter Text Inside a Full-Width Container

Set the parent width to the available screen width when the text should be centered across a full row or section.

Container(
  width: double.infinity,
  padding: const EdgeInsets.all(16),
  child: const Text(
    'Order completed',
    textAlign: TextAlign.center,
  ),
)

Here, double.infinity asks the container to occupy the maximum permitted width. The text can then be aligned relative to that full width.

Center Text Vertically and Horizontally

Use Center when the entire text widget must be positioned at the horizontal and vertical center of its parent. Keep textAlign: TextAlign.center when the message may wrap onto multiple lines.

const Center(
  child: Text(
    'No records found',
    textAlign: TextAlign.center,
  ),
)

The Center widget controls the position of its child. The textAlign property controls the alignment of the text lines within that child.

Center Text in a Flutter Row

A Row lays out its children horizontally. To give the text the remaining row width and center its contents, wrap it with Expanded.

const Row(
  children: [
    Icon(Icons.info_outline),
    SizedBox(width: 8),
    Expanded(
      child: Text(
        'Account information',
        textAlign: TextAlign.center,
      ),
    ),
  ],
)

Expanded supplies a bounded width for the text. This also helps prevent horizontal overflow when the string is longer than the remaining space.

Center Text in a Flutter Column

A Column can center its children horizontally with crossAxisAlignment: CrossAxisAlignment.center. This centers each child widget, while textAlign still controls multiline alignment within the Text widget.

const Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.check_circle_outline),
    SizedBox(height: 8),
    SizedBox(
      width: 240,
      child: Text(
        'Your changes have been saved successfully.',
        textAlign: TextAlign.center,
      ),
    ),
  ],
)

Why TextAlign.center May Appear Not to Work

If changing textAlign does not produce a visible difference, check the width assigned to the text widget.

• The text has no extra horizontal space: place it in a SizedBox, full-width Container, Expanded, or another parent that provides a wider constraint.
• You need to move the widget itself: wrap the text with Center or Align instead of relying only on textAlign.
• The text is inside a Row: use Expanded or Flexible so the text receives a usable width.
• The parent controls child placement: inspect properties such as mainAxisAlignment, crossAxisAlignment, and alignment.
• The text contains only one short line: test with a longer sentence or a fixed-width parent to confirm the alignment.

TextAlign.center and Center Widget Compared

Flutter option	What it centers	Typical use
TextAlign.center	Lines inside a Text widget	Centering multiline labels, messages, and headings
Center	The entire child widget inside its parent	Placing text in the middle of a page or available area
Align(alignment: Alignment.center)	The child at a selected position inside its parent	Positioning with explicit alignment control
mainAxisAlignment	Children along a Row or Column’s main axis	Centering a group of widgets along the layout direction
crossAxisAlignment	Children along a Row or Column’s cross axis	Controlling how sibling widgets line up

Flutter Center-Aligned Text FAQs

How do I center text horizontally in Flutter?

Use textAlign: TextAlign.center and make sure the Text widget receives enough width. A full-width container, SizedBox, or Expanded can provide that width.

How do I center a Text widget on the screen?

Wrap the Text widget with Center. Add textAlign: TextAlign.center as well when the string may wrap across multiple lines.

Why is my Flutter text still aligned to the left?

The widget may be only as wide as its text, leaving no extra space in which to show centered alignment. Give it a wider constraint and verify that textAlign is set on the correct Text widget.

Does TextAlign.center center text vertically?

No. TextAlign.center controls horizontal line alignment. Use Center, Align, or the alignment properties of the parent layout to control vertical positioning.

Flutter Center Text Editorial QA Checklist

• Confirm that every centered multiline example provides a clear horizontal width constraint.
• Distinguish text-line alignment from positioning the complete Text widget.
• Test examples with both short and wrapping strings to verify the visible alignment.
• Check Row examples for Expanded or Flexible where the text needs remaining width.
• Verify that centered text remains readable when the device text size is increased.

Center Align Text in Flutter: Summary

Use textAlign: TextAlign.center to center the lines rendered by a Flutter Text widget. Give the widget sufficient width for the alignment to be visible. Use Center or Align when you need to position the entire widget within its parent.

In this Flutter Tutorial, we learned how to align text of Text widget at center.