RectRevealButton constructor

const RectRevealButton({
  1. Key? key,
  2. required Widget widgetA,
  3. required Widget widgetB,
  4. Color backgroundColorA = Colors.black,
  5. Color backgroundColorB = Colors.white,
  6. Color rippleColorA = Colors.white,
  7. Color rippleColorB = Colors.black,
  8. required VoidCallback onPressed,
  9. double height = 48,
  10. double? width,
  11. double radius = 2,
  12. Duration duration = const Duration(milliseconds: 300),
  13. bool? selected,
  14. BoxBorder? border,
  15. EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16),
  16. AlignmentGeometry alignment = Alignment.center,
  17. RevealDirection revealDirection = RevealDirection.fromClick,
})

Crea un RectRevealButton.

widgetA y widgetB son los widgets a mostrar en cada estado (requeridos). Se recomienda usar estilos contrastantes para mejor visibilidad.

backgroundColorA y backgroundColorB son los colores de fondo para cada estado. Deben ser diferentes para que el efecto sea visible.

rippleColorA y rippleColorB son los colores del reveal para cada estado. Deben ser diferentes para crear el efecto de transición.

onPressed es el callback que se ejecuta al presionar el botón (requerido).

revealDirection controla desde dónde se expande el reveal:

selected permite control externo del estado del botón (opcional). Si es null, el botón maneja su propio estado internamente.

height es la altura del botón. Por defecto: 48.0

width es el ancho del botón. Si es null, usa el ancho disponible.

radius es el radio de las esquinas. Mínimo: 2.0. Por defecto: 2.0

duration es la duración de la animación del reveal. Por defecto: 300ms

border es un borde opcional decorativo (no afecta el área de toque).

padding es el padding interno del contenido. Por defecto: horizontal 16px

alignment controla la alineación del contenido. Por defecto: center

Implementation

const RectRevealButton({
  super.key,
  required this.widgetA,
  required this.widgetB,
  this.backgroundColorA = Colors.black,
  this.backgroundColorB = Colors.white,
  this.rippleColorA = Colors.white,
  this.rippleColorB = Colors.black,
  required this.onPressed,
  this.height = 48,
  this.width,
  this.radius = 2,
  this.duration = const Duration(milliseconds: 300),
  this.selected,
  this.border,
  this.padding = const EdgeInsets.symmetric(horizontal: 16),
  this.alignment = Alignment.center,
  this.revealDirection = RevealDirection.fromClick,
}) : assert(
       backgroundColorA != backgroundColorB,
       'backgroundColorA y backgroundColorB deben ser diferentes',
     ),
     assert(
       rippleColorA != rippleColorB,
       'rippleColorA y rippleColorB deben ser diferentes',
     ),
     assert(radius >= 2, 'El radio debe ser al menos 2');