Flutter

Centrar un Texto Vertical y Horizontal

23 octubre, 2024
21,175 lecturas
¿Cómo centrar un Text en Flutter vertical y horizontalmente?

Dado que el widget Text es muy usado para mostrar textos en nuestras aplicaciones es que necesitamos controlar la alineación del texto.

CENTRAR UN TEXTO EN FLUTTER

Debemos tener en claro que una cosa es centrar el widget y otra el contenido del widget, dicho esto vamos a ver como centrar completamente un texto muy fácilmente.

  • Para centrar un widget de tipo Text debemos colocarlo dentro de un Container
  • A su vez colocar en un widget Center 
  • Finalmente tenemos centrado el widget
  • Espera aún falta centrar el texto en si, para ello usa la propiedad style( textAlign : TextAlign.center)
  • Y listo ya esta centrado vertical y horizontalmente

 

Para centrar un texto en Flutter, puedes utilizar el widget Center o el widget Text con la propiedad textAlign. Aquí tienes algunas formas de hacerlo:

Usando el Widget Center

El widget Center te permite centrar cualquier widget, incluido el Text, en su contenedor. Aquí tienes un ejemplo:

dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Texto Centrado')),
      body: Center(
        child: Text(
          'Hola, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    ),
  ));
}

Usando Text con textAlign

También puedes centrar el texto usando la propiedad textAlign del widget Text. Sin embargo, esto solo funcionará si el texto está contenido dentro de un widget que tenga un ancho definido, como Container o Column:


 

dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Texto Centrado')),
      body: Container(
        alignment: Alignment.center, // Centrar el contenedor
        child: Text(
          'Hola, Flutter!',
          textAlign: TextAlign.center, // Centrar el texto
          style: TextStyle(fontSize: 24),
        ),
      ),
    ),
  ));
}

Usando Column con MainAxisAlignment

Si estás usando un Column, puedes centrar el texto configurando mainAxisAlignment:


 

dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Texto Centrado')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hola, Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ],
      ),
    ),
  ));
}

 

Recurso del Tutorial

Gratis
141 descargas

Tutoriales Recomendados

Sigue explorando publicaciones de la misma categoría

Ver todos