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

¿Quizás esté pensando en utilizar AlignmentDirectional en tu aplicación de Flutter y no sabes cómo se hace? 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?

Si has respondido que sí, tranqui. No eres la única persona, ni serás la última, que entra en este artículo intentando dar respuesta a sus preguntas.

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 a tu aplicación.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

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 200×200 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.

Pues creo que con esto es todo. Si piensas que falta algo, o que quizás no has encontrado lo que buscas, dímelo en los comentarios y lo agregamos.

Nos vemos en el siguiente artículo. ¡Hasta entonces, que vaya bien!