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í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 17440 veces | 1 usuarios

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

141 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


App restaurant con pedidos en Flutter

USD 17.00

Descarga del código fuente

App restaurant con pedidos en Flutter

Más tutoriales de Flutter

Codea Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024