Centrar un Texto Vertical y Horizontal

¿Cómo centrar un Text en Flutter vertical y horizontalmente?

Video Centrar un Text

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

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

CENTRAR DOS WIDGET TEXT EN FLUTTER

  • Hay varias maneras desde usar un Colum haciendo incapie en su propiedad MaxAlign
  • Usando el width del container
  • Y obviamente la propiedad style( textAlign : TextAlign.center) por cada uno.

CÒDIGO DART

class _PaginaInicioState extends State<PaginaInicio> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(color: Colors.indigoAccent),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("TEXTO CENTRADO", style: TextStyle(color: Colors.white, fontSize: 40),),
            SizedBox( height: 40,),
            Text(
              "OTRO TEXTO CENTRADO EN UNA APLICACIÓN MÓVIL CON EL SDK DE FLUTTER",
              style: TextStyle(color: Colors.white,),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

 

No hay descargable

Redactado por: , Leido 8901 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021