23 octubre, 2024
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.
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 texto en Flutter, puedes utilizar el widget Center
o el widget Text
con la propiedad textAlign
. Aquí tienes algunas formas de hacerlo:
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),
),
),
),
));
}
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),
),
),
),
));
}
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 17440 veces | 1 usuarios
141 descargas
Para descargar el código crea una cuenta
Crear cuenta© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024