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

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

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 tiene descargable

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 2217 veces | Publicado hace 6 meses

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

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