Flutter: Align Widget

2024-06-02T18:00:00-05:00 | 3 minutos de lectura | Actualizado en 2025-01-24T07:42:46-05:00

jaimetellezb

Tabla de Contenido

Tabla de Contenido
Introducción
- Align
Conclusión
Referencias

Introducción

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,
          ),
        ),
      ),
    );
  }
}

demo1

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,
          ),
        ),
      ),
    );
  }
}

demo2

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,
          ),
        ),
      ),
    );
  }
}

demo3

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"),
)

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!