Centrar un Texto Vertical y Horizontal

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

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

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

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 258 veces | Publicado hace 1 mes

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER MÁS DETALLES DEL CURSO

Logo Codea App

Develop your code

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

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020