Centrar un Texto Vertical y Horizontal

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,
            ),
          ],
        ),
      ),
    );
  }
}

Leido 17138 veces