Inicio » Blog »

23 octubre, 2024

Centrar un Texto Vertical y Horizontal

Para centrar un texto debemos usar el widget Center() esto centrará vertical y horizontalmente al widget, más para su contenido usaremos textAlign.center

Centrar un Texto Vertical y Horizontal

Suscríbete a nuestro canal en Youtube

Suscríbirse

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

Descarga del código fuente Flutter de Centrar un Texto Vertical y Horizontal

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.

Opciones de descarga

  • Usuarios Registrados: Inicia sesión para descarga inmediata.
  • Nuevos Usuarios: Regístrate y descarga.

141 descargas

Para descargar el código inicia sesión o crea una cuenta

Iniciar Sesión

Compartir link del tutorial con tus amigos


App restaurant con pedidos en Flutter

USD 11.00

Descarga del código fuente

App restaurant con pedidos en Flutter

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú