AlignmentDirectional en Flutter, sus costantes y cómo utilizar esta clase

¿Necesitas alinear un Widget de una manera concreta y Flutter te obliga a utilizar AlignmentDirectional para hacerlo? O, quizás si que sabes, pero te falta conocer algún detalle más para terminar de dejarlo cómo te gustaría ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo puedes utilizar la clase AlignmentDirectional para dar formato al diseño de tu aplicación de manera eficaz y sencilla.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

 

Primero, qué es AlignmentDirectional

AlignmentDirectional es una clase en el framework Flutter que se utiliza para especificar una posición de alineación en una coordenada bidimensional.

La posición de alineación se especifica utilizando una combinación de dos variables flotantes "start" y "y". Y después puede ser editada de manera manual.

A parte, tiene varias constantes predefinidas que podemos utilizar para no tener que estar asignando todo a mano.

 

Ahora, veamos un ejemplo de código

Para que todo sea mucho más ilustrativo y pillar el concepto, o usar el código en tu aplicación, veamos un ejemplo.

...

Container(
    width: 200.0,
    height: 200.0,
    decoration: BoxDecoration(
        color: Colors.blue[50],
    ),
    child: Align(
        alignment: AlignmentDirectional.bottomEnd,
        child: Text("Texto alineado al final inferior"),
    ),
)

...

 

En este ejemplo, estamos creando un Container de 200x200 con una decoración de color azul. Dentro del Container estamos utilizando un Align widget para especificar una posición de alineación utilizando AlignmentDirectional.bottomEnd. Esto hará que el texto se alinee al final inferior del Container.

También puedes utilizar una TextDirection para especificar la dirección del texto, para esto tienes que envolver a todo el Widget tree con un Directionality Widget.

...

Directionality(
   textDirection: TextDirection.rtl,
   child: Container(
    width: 200.0,
    height: 200.0,
    decoration: BoxDecoration(
        color: Colors.blue[50],
    ),
    child: Align(
        alignment: AlignmentDirectional.bottomEnd,
        child: Text("Texto alineado al final inferior"),
    ),
  ),
)

...

 

El cambio del textDirection cambiara el borde de inicio de la posición de alineación, por ejemplo en este caso el borde derecho será el borde de inicio, entonces AlignmentDirectional.bottomEnd se convertirá en alinear el texto al borde derecho de la parte inferior.

 

Propiedades de AlignmentDirectional

 

• start: La fracción de distancia en la dirección horizontal.
• y: La fracción de distancia en la dirección vertical.

 

 

Métodos y funciones

 

• (static) lerp(AlignmentDirectional a, AlignmentDirectional b, double t): Este método se utiliza para calcular una posición intermedia entre dos posiciones de alineación dado un valor de tiempo t entre 0.0 y 1.0.
• resolve(TextDirection direction): Este método se utiliza para obtener una Alignment equivalente a esta posición de alineación dada una dirección de texto.
• toString(): Este método se utiliza para obtener una representación legible del objeto AlignmentDirectional en forma de String.

 

Constantes de clase

 

Estas constantes nos permitirán construir objetos de esta clase con opciones predeterminadas.

• AlignmentDirectional.topStart: Especifica una posición de alineación en la parte superior izquierda del elemento padre.
• AlignmentDirectional.topEnd: Especifica una posición de alineación en la parte superior derecha del elemento padre.
• AlignmentDirectional.bottomStart: Especifica una posición de alineación en la parte inferior izquierda del elemento padre.
• AlignmentDirectional.bottomEnd: Especifica una posición de alineación en la parte inferior derecha del elemento padre.
• AlignmentDirectional.centerStart: Especifica una posición de alineación en el centro izquierda del elemento padre.
• AlignmentDirectional.centerEnd: Especifica una posición de alineación en el centro derecha del elemento padre.
• AlignmentDirectional.center: Especifica una posición de alineación en el centro del elemento padre.

 

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

 

Geniete, pues esto ha sido todo por hoy. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entoces ¡que te vaya bien!