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 tipodouble
.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 tipodouble
.
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,
),
),
),
);
}
}
Evidencia
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,
),
),
),
);
}
}
Evidencia
Ejemplo por constantes
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: Alignment.center,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
c3,
c3,
c3,
c2,
c2,
c2,
c1,
c1,
c1,
c1,
],
),
shape: BoxShape.rectangle,
),
height: 100,
width: 150,
),
),
),
);
}
}
Evidencia
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!!!