Flutter: Align Widget

En esta ocasión veremos un widget que nos permite como su nombre lo indica alinear un widget hijo dentro de un widget padre.

Align

Este widget permite poder ubicar el widget hijo en la posición que se necesite y tener mayor control del mismo. Cuando no especificamos una alineación por defecto utiliza Alignment.center , por lo cual el widget hijo quedará centrado. Se puede usar también alineación por medio de posición en X(Horizontal) y Y(Vertical) donde la posición inicial es -1.0.

Constructores

• Align este constructor es usado crear un widget de alineación.

const Align(
  {Key? key,
  AlignmentGeometry alignment = Alignment.center,
  double? widthFactor,
  double? heightFactor,
  Widget? child}
)

Propiedades más usadas

• alignment es la propiedad requerida para realizar la alineación del widget hijo. Es de tipo AlignmentGeometry y tiene algunos valores estáticos para ubicación. 

Alignment.bottomCenter → Centro inferior
Alignment.bottomLeft → Esquina inferior izquierda
Alignment.bottomRight → Esquina inferior derecha
Alignment.center → Centro // por defecto
Alignment.centerLeft → Parte izquierda del centro
Alignment.centerRight → Parte derecha del centro
Alignment.topCenter → Centro superior
Alignment.topLeft → Esquina superior izquierda
Alignment.topRight Esquina superior derecha

• child es la propiedad de tipo Widget donde se agrega el widget hijo que necesitamos alinear.
• heightFactor Si no es nulo, establece su altura en la altura del widget hijo multiplicada por el valor colocado en la propiedad. Es un valor de tipo double .
• widthFactor Si no es nulo, establece su ancho en el ancho del widget hijo multiplicado por el valor colocado en la propiedad. Es un valor de tipo double .

Ejemplo con heightFactor y widthFactor

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Align Widget',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Align(
          heightFactor: 5,
          widthFactor: 1.5,
          child: Container(
            color: Colors.amber,
            height: 100,
            width: 100,
          ),
        ),
      ),
    );
  }
}

Ejemplo por posición (x, y)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    Color c1 = const Color.fromARGB(255, 251, 255, 0);
    Color c2 = const Color.fromARGB(255, 0, 112, 204);
    Color c3 = const Color.fromARGB(255, 250, 0, 0);

    return MaterialApp(
      title: 'Align Widget',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Align(
          alignment: const Alignment(0.9, 0.9),
          child: Container(
            decoration: BoxDecoration(
              gradient: RadialGradient(
                colors: [
                  c3,
                  c3,
                  c3,
                  c3,
                  c2,
                  c2,
                  c2,
                  c2,
                  c1,
                  c1,
                  c1,
                  c1,
                ],
              ),
              shape: BoxShape.circle,
            ),
            height: 100,
            width: 100,
          ),
        ),
      ),
    );
  }
}

Ejemplo por posición (x, y)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    Color c1 = const Color.fromARGB(255, 251, 255, 0);
    Color c2 = const Color.fromARGB(255, 0, 112, 204);
    Color c3 = const Color.fromARGB(255, 250, 0, 0);

    return MaterialApp(
      title: 'Align Widget',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Align(
          alignment: const Alignment(0.9, 0.9),
          child: Container(
            decoration: BoxDecoration(
              gradient: RadialGradient(
                colors: [
                  c3,
                  c3,
                  c3,
                  c3,
                  c2,
                  c2,
                  c2,
                  c2,
                  c1,
                  c1,
                  c1,
                  c1,
                ],
              ),
              shape: BoxShape.circle,
            ),
            height: 100,
            width: 100,
          ),
        ),
      ),
    );
  }
}

Evidencias

También existe el widget Center que realiza la misma tarea de Alignment.center , como su nombre lo indica es para centrar un widget hijo. 

Utilizando Align

Align(
  alignment: Alignment.center,
  child: Text("CENTRADO"),
)

Utilizando widget Center

Center(
  child: Text("CENTRADO"),
)

Conclusión

En conclusión, el widget Align principalmente cuando necesitemos realizar una alineación en cierto punto de un contenedor y nos ayuda a organizar mejor los widget. 

¡¡¡Gracias por leer este artículo!!!