Centrar un Texto Vertical y Horizontal

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),
          ),
        ],
      ),
    ),
  ));
}

Leido 18824 veces | 1 usuarios