Tabla de Contenido
Introducción
El widget Divider, como su nombre lo indica sirve para dividir componentes o widgets. Por ejemplo, en los listados se puede usar para poner una línea que divida cada una de las filas.
Divider
El widget Divider, no es más que una línea simple que agrupar componentes o secciones.
Casos de uso
Los desarrolladores de Flutter recomiendan usar este widget siempre y cuando no sea posible agrupar los elementos con espacios abiertos y utilizarlos para agrupar no para separar los elementos.
Consideraciones
- Hacer que los divisores sean visibles pero no con negrita, sino un color más sutil.
- Utilizarlos para agrupar no para separar.
- Se pueden usar para dar jerarquía a los componentes y entender su relación padre — hijo.
- Se puede utilizar Divider para separar secciones grandes, utilizando el ancho completo.
- También se puede utilizar para separar contenido relacionado.
- El Divider vertical no se ve la línea pero si genera un espacio.
Ejemplo
import 'package:flutter/material.dart';
/// Clase Screen para widget divider
class DividerScreen extends StatelessWidget {
const DividerScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Divider Screen'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
const Expanded(
child: Column(
children: [
Text(
"Amet adipisicing quis qui laborum mollit tempor ipsum et. Fugiat do ea tempor ullamco eu. Proident ad est ex enim magna culpa fugiat."),
Divider(
color: Colors.red,
),
SelectedColor()
],
),
),
const Divider(
height: 20, // alto del widget
thickness: 5, // ancho de la línea
indent:
50, // espacio en blanco desde la izquierda hasta el divider
endIndent:
50, // espacio en blanco desde la derecha hasta el divider
color: Colors.black,
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
width: 100,
decoration: const BoxDecoration(color: Colors.amber),
),
const Divider(
height: 20,
thickness: 10,
indent: 10,
endIndent: 5,
color: Colors.black,
),
Container(
height: 100,
width: 100,
decoration: const BoxDecoration(color: Colors.green),
)
],
),
),
],
),
),
),
);
}
}
class SelectedColor extends StatefulWidget {
const SelectedColor({super.key});
@override
State<SelectedColor> createState() => _SelectedColorState();
}
class _SelectedColorState extends State<SelectedColor> {
ColorSegment selection = ColorSegment.blue;
@override
Widget build(BuildContext context) {
return SegmentedButton(
segments: const <ButtonSegment<ColorSegment>>[
ButtonSegment<ColorSegment>(
value: ColorSegment.yellow,
label: Text(
'Amarillo',
style: TextStyle(color: Colors.yellow),
),
),
ButtonSegment<ColorSegment>(
value: ColorSegment.blue,
label: Text(
'Azul',
style: TextStyle(color: Colors.blue),
)),
ButtonSegment<ColorSegment>(
value: ColorSegment.red,
label: Text(
'Rojo',
style: TextStyle(color: Colors.red),
),
),
ButtonSegment<ColorSegment>(
value: ColorSegment.green,
label: Text(
'Verde',
style: TextStyle(color: Colors.green),
),
),
],
selected: <ColorSegment>{selection},
onSelectionChanged: (Set<ColorSegment> newSelection) {
setState(() {
selection = newSelection.first;
});
},
);
}
}
enum ColorSegment { yellow, blue, red, green }
Conclusión
Para concluir, podemos decir que, El Divider es un widget que nos puede servir en casos que queramos agrupar información relacionada dentro de un mismo fondo, para así no tener que hacer un separado con espacios.
¡Gracias por leer!
