Widget Align de Flutter, qué es y cómo se utiliza

¿Quieres implementar el widget Align de Flutter y no sabes muy bien cómo hacerlo? O, quizás, si que sabes pero te falta algún detalle que pulir ¿verdad?

Si has respondido que sí, tranqui. No eres la primera persona, ni serás la última, que entra aquí intentando dar respuesta a estas preguntas.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo utilizar el widget Align de Flutter de una manera sencilla y útil para tus aplicaciones.

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.

¿Qué nos permite hacer este Widget?

El widget Align es un widget que permite alinear un widget hijo en relación a su widget padre. Puedes especificar el punto de anclaje en el que se debe alinear el hijo y la forma en que se debe expandir si el tamaño del widget padre es mayor al del widget hijo.

¿Y cómo se utiliza Align?

Para usar el widget Align, primero debes agregarlo como padre del widget que quieres alinear. Luego, debes especificar la alineación deseada utilizando el parámetro alignment.

Aquí tienes un ejemplo de cómo usar el widget Align para alinear un botón en la parte inferior derecha de su widget padre:

...

Align(
  alignment: Alignment.bottomRight,
  child: RaisedButton(
    onPressed: () {
      // Acción del botón
    },
    child: Text("Botón"),
  ),
)

...

En este ejemplo, el botón se mostrará en la parte inferior derecha del widget Align.

Principales características del widget Align

Ahora vamos a enumerar las principales características de este Widget para que puedas saber, más o menos, lo que puedes hacer con él.

• Es un widget que permite alinear un widget hijo en relación a su widget padre. Puedes especificar el punto de anclaje en el que se debe alinear el widget hijo y la forma en que se debe expandir si el tamaño del widget padre es mayor al del widget hijo.
• Ocupa todo el espacio disponible en su widget padre. Si quieres que el widget hijo ocupe solo el espacio que necesita, puedes usar el widget Container en lugar de Align.
• Acepta el parámetro widthFactor y heightFactor, que te permiten especificar el porcentaje de ancho y alto que debe ocupar el widget hijo en relación al widget padre. Por ejemplo, si estableces widthFactor en 0.5 y heightFactor en 0.7, el widget hijo ocupará el 50% del ancho y el 70% del alto del widget padre.
• Acepta el parámetro fit, que te permite especificar cómo deben comportarse el widget padre y el widget hijo cuando el tamaño del widget padre es mayor al del widget hijo. Los valores posibles son:
  • BoxFit.fill: El widget padre ocupa todo el espacio disponible y el widget hijo se ajusta al tamaño del widget padre.
  • BoxFit.contain: El widget hijo se mantiene a su tamaño original y el widget padre se ajusta al tamaño del widget hijo.
  • BoxFit.cover: El widget hijo ocupa todo el espacio disponible y el widget padre se ajusta al tamaño del widget hijo.
  • BoxFit.fitWidth: El widget hijo se ajusta al ancho del widget padre y se mantiene a su altura original.
  • BoxFit.fitHeight: El widget hijo se ajusta al alto del widget padre y se mantiene a su ancho original.
  • BoxFit.none: El widget hijo se mantiene a su tamaño original y el widget padre ocupa el espacio necesario para mostrar el widget hijo.

Propiedades del Widget Align

Recuerdo que las propiedades aquí listadas serán las propias, las de los padres no aparecerán:

• alignment: Alineación del widget hijo en relación al widget padre. Puedes usar una de las constantes predefinidas de Alignment o crear una instancia de Alignment con valores personalizados.
• widthFactor: Porcentaje de ancho que debe ocupar el widget hijo en relación al widget padre.
• heightFactor: Porcentaje de alto que debe ocupar el widget hijo en relación al widget padre.
• fit: Especifica cómo deben comportarse el widget padre y el widget hijo cuando el tamaño del widget padre es mayor al del widget hijo.
• child: Widget hijo que se debe alinear.

Pues espero que con toda esta información te haya quedado claro lo que buscas.

Si por alguna razón no ha sido así, por favor, dímelo en los comentarios de este artículo e intentaré echarte una mano en cuanto lo vea.

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