▷ Alignment 【 Flutter 】 La guía más completa de 2023 Aquí

¿Quieres utilizar la clase Alignment en un widget Align de tu aplicación de Flutter, pero no sabes cómo se utiliza? O, quizás, si que sabes, pero te falta algún detalle que conocer para dejar todo 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 utilizar esta clase, y los valores constantes que tiene para que puedas alinear los widgets.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización 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.

Pero ¿qué es Alignmnet?

La clase Alignment en Flutter es una clase que se utiliza para describir la posición de un objeto dentro de un espacio bidimensional.

Esta clase es comúnmente utilizada cuando se desea posicionar un widget dentro de otro widget.

La clase Alignment tiene dos propiedades, x y y, que representan la posición del objeto en el eje horizontal (x) y el eje vertical (y), respectivamente.

Ambos valores son números flotantes comprendidos entre -1.0 y 1.0, donde -1.0 representa la posición más a la izquierda o arriba, 0.0 representa la posición central y 1.0 representa la posición más a la derecha o abajo.

¿Y cómo se utiliza Alignment en Flutter?

Primero una cosita...

La clase Alignment tiene varios constructores para crear instancias de ella:

Alignment(double x, double y) crea una nueva instancia de Alignment con los valores especificados para x e y.
Alignment.center es una constante que representa una posición central (x: 0.0, y: 0.0)
Alignment.topLeft es una constante que representa una posición superior izquierda (x: -1.0, y: -1.0)
Alignment.bottomRight es una constante que representa una posición inferior derecha (x: 1.0, y: 1.0)
El resto las puedes intuir con los nombres que hemos visto y que las trataremos a continuación.

Por ejemplo, si quieres crear un botón que se alinee en la parte inferior derecha del contenedor podrías usar:

...

Container(
  child: Align(
    alignment: Alignment.bottomRight,
    child: FlatButton(
      onPressed: () => print('Hola mundo'),
      child: Text('Presiona aquí'),
    ),
  ),
)

...

Además de esto, hay una clase llamada Align que utiliza Alignment para alinear un widget hijo dentro del espacio asignado a un widget padre. Y existe también FractionalOffset, que es similar a Alignment pero utiliza un sistema de coordenadas donde (0,0) es el origen (esquina superior izquierda) del espacio de dibujo y (1,1) es la esquina inferior derecha.

Ahora sí, hay varias formas de utilizar la clase Alignment en tu aplicación, dependiendo del contexto y de lo que desees lograr. A continuación, te proporciono algunos ejemplos de cómo puedes utilizar Alignment para alinear elementos dentro de tu aplicación.

1 - Utilizando Align: Puedes utilizar el widget Align para alinear un widget hijo dentro del espacio asignado a un widget padre. En el ejemplo que te di anterior, se creó un Container como widget padre, y se utilizó Align para alinear un botón en la parte inferior derecha del contenedor:

...

Container(
  child: Align(
    alignment: Alignment.bottomRight,
    child: FlatButton(
      onPressed: () => print('Hola mundo'),
      child: Text('Presiona aquí'),
    ),
  ),
)

...

2 - Utilizando Stack: Puedes utilizar el widget Stack para superponer varios widgets uno encima de otro, y luego utilizar Alignment para posicionar cada widget en la pantalla. En el siguiente ejemplo, se crea un Stack con tres widgets hijos: un Container rojo, un Container azul y un Text negro. El Container rojo está alineado en la parte superior izquierda, el Container azul está alineado en la parte inferior derecha, y el Text está alineado en el centro:

...

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.topLeft,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
    Align(
      alignment: Alignment.center,
      child: Text(
        'Hola mundo',
        style: TextStyle(color: Colors.black),
      ),
    ),
  ],
)

...

3 - Utilizando Positioned: Si estas usando un Stack puedes utilizar Positioned para posicionar elementos con respecto a las coordenadas del Stack. En este caso se especifica un Alignment para calcular las coordenadas left, right, top and bottom.

...

Stack(
  children: <Widget>[
    Positioned(
      left: 0,
      top: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      right: 0,
      bottom: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
    Positioned.fill(
      child: Align(
        alignment: Alignment.center,
        child: Text(
          'Hola mundo',
          style: TextStyle(color: Colors.black),
        ),
      ),
    ),
  ],
);

...

Hay varias otras formas de utilizar `Alignment` en tu aplicación, pero estos son algunos ejemplos básicos que te pueden ayudar a entender cómo funciona. Es importante recordar que `Alignment` es solo una de las herramientas disponibles para ayudarte a posicionar elementos en tu aplicación, y debes elegir la que mejor se adapte a tus necesidades.

Propiedades de la clase Alignment

Recuerda, solo vamos a comentar las propias. Las de los padres las comentaremos cuando les toque el turno a ellos.

x: Es un número flotante que representa la posición del objeto en el eje horizontal. El valor debe estar comprendido entre -1.0 y 1.0, donde -1.0 representa la posición más a la izquierda, 0.0 representa la posición central y 1.0 representa la posición más a la derecha.
y: Es un número flotante que representa la posición del objeto en el eje vertical. El valor debe estar comprendido entre -1.0 y 1.0, donde -1.0 representa la posición más arriba, 0.0 representa la posición central y 1.0 representa la posición más abajo.

Constructores de la clase Alignment

Alignment(double x, double y) crea una nueva instancia de Alignment con los valores especificados para x e y.
Alignment.fromFractionalOffsets(FractionalOffset a, FractionalOffset b) crea una nueva instancia de Alignment a partir de dos FractionalOffset.

Métodos y funciones

add(AlignmentGeometry other) → AlignmentGeometry
- Retorna el offset de la fracción con el size dado.
inscribe(Size size, Rect rect) → Rect
- Retorna un rectángulo del tamaño dado, alineado con el rectángulo dado especificado por la alineación.
resolve(TextDirection? direction) → Alignment
- Convierte esta instancia en un Alignment, que utilizará coordenadas literales.
withinRect(Rect rect) → Offset
- Retorna el punto de la fracción con el rectángulo dado.
(Static) Alignment.lerp(Alignment a, Alignment b, double t) → Alignment:
- Este método devuelve una nueva instancia de Alignment que está a un "t" por ciento entre la instancia "a" y "b", es decir, devuelve una interpolación lineal entre dos puntos de alineación.

Constantes que podemos utilizar

bottomCenter→ const Alignment
- The center point along the bottom edge.
- Alignment(0.0, 1.0)
bottomLeft→ const Alignment
- The bottom left corner.
- Alignment(-1.0, 1.0)
bottomRight→ const Alignment
- The bottom right corner.
- Alignment(1.0, 1.0)
center→ const Alignment
- The center point, both horizontally and vertically.
- Alignment(0.0, 0.0)
centerLeft→ const Alignment
- The center point along the left edge.
- Alignment(-1.0, 0.0)
centerRight→ const Alignment
- The center point along the right edge.
- Alignment(1.0, 0.0)
topCenter→ const Alignment
- The center point along the top edge.
- Alignment(0.0, -1.0)
topLeft→ const Alignment
- The top left corner.
- Alignment(-1.0, -1.0)
topRight→ const Alignment
- The top right corner.
- Alignment(1.0, -1.0)

Cosas a tener en cuenta

Aunque parte las hemos comentado en el artículo, es importante que recordemos lo siguiente:

Los valores x e y pueden ser números no solo entre -1.0 y 1.0, estos valores pueden ser cualquier número flotante, pero es recomendable seguir en ese rango para evitar errores en el posicionamiento.
Alignment se utiliza en conjunto con otras clases como Align o Stack, si se desea alinear algo pero no se tiene un widget padre o un widget a posicionar sobre otro se deberá crear un widget temporal para poder utilizarlo.
Alignment puede ser usado en otras partes de la app no solo en widgets como mencioné en ejemplos anteriores, un ejemplo de esto es en el AnimatedContainer para mover una caja de un punto a otro en la pantalla.

En resumen, Alignment es una herramienta importante y útil en Flutter para posicionar elementos en una aplicación y es fácil de usar y entender.

Recuerda que es solo una de las herramientas disponibles para lograrlo, existen muchas otras formas de posicionar elementos en una aplicación. Por eso es importante elegir la mejor opción para cada caso en particular.

Algo más que quizás te interesa

Mira, cuanto mejor, más optimizado y más tasa de conversión consigas con tu logo, más instalaciones vas a tener y más dinero vas a ganar con esa app. Pues bien, basándonos en esto, hemos hecho para ti esta herramienta. Una herramienta que te va a permitir evaluar, optimizar y mejorar tu logo y espiar los logos de la competencia. No te espoileo más, entra en el enlace.

Y ahora ya si, me despido. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!

Qué es y cómo se utiliza Alignment en Flutter