Widget Align de Flutter, así puedes centrar una imagen en un container

¿Necesitas centrar una imagen, o un texto, y no sabes bien cómo hacerlo? O, quizás, la forma tradicional de hacerlo no te está funcionando y has optado por el Widget Align ¿verdad? Si es así, sigue leyendo.

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

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!

 

¿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.

 

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, espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!