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

Suscríbete a nuestro canal en Youtube
SuscríbirseDado 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.