RectRevealButton class

Botón animado con efecto reveal rectangular que alterna entre dos widgets.

Crea una transición visual suave mediante un efecto de "revelación" rectangular que puede expandirse desde el punto de toque, desde la izquierda o desde la derecha.

Perfecto para botones de toggle, switches personalizados y elementos interactivos que requieren feedback visual claro del cambio de estado.

Ejemplo básico:

RectRevealButton(
  widgetA: Text(
    'ON',
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
  ),
  widgetB: Text(
    'OFF',
    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  ),
  backgroundColorA: Colors.black,
  backgroundColorB: Colors.white,
  rippleColorA: Colors.white,
  rippleColorB: Colors.black,
  onPressed: () => print('Toggled!'),
)

Ejemplo con dirección personalizada:

RectRevealButton(
  widgetA: Icon(Icons.favorite, color: Colors.white),
  widgetB: Icon(Icons.favorite_border, color: Colors.red),
  backgroundColorA: Colors.red,
  backgroundColorB: Colors.white,
  rippleColorA: Colors.red,
  rippleColorB: Colors.white,
  revealDirection: RevealDirection.fromLeft,
  onPressed: () => toggleFavorite(),
  height: 50,
  radius: 12,
)

Ejemplo con control externo del estado:

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isActive = false;

  @override
  Widget build(BuildContext context) {
    return RectRevealButton(
      selected: isActive,
      widgetA: Text('Activo'),
      widgetB: Text('Inactivo'),
      backgroundColorA: Colors.green,
      backgroundColorB: Colors.grey,
      rippleColorA: Colors.green,
      rippleColorB: Colors.grey,
      onPressed: () {
        setState(() => isActive = !isActive);
      },
    );
  }
}

Ejemplo con borde personalizado:

RectRevealButton(
  widgetA: Text('Premium', style: TextStyle(color: Colors.amber)),
  widgetB: Text('Básico', style: TextStyle(color: Colors.grey)),
  backgroundColorA: Colors.black,
  backgroundColorB: Colors.white,
  rippleColorA: Colors.amber,
  rippleColorB: Colors.grey,
  border: Border.all(color: Colors.amber, width: 2),
  radius: 16,
  height: 60,
  onPressed: () => upgradePlan(),
)
Inheritance

Constructors

RectRevealButton({Key? key, required Widget widgetA, required Widget widgetB, Color backgroundColorA = Colors.black, Color backgroundColorB = Colors.white, Color rippleColorA = Colors.white, Color rippleColorB = Colors.black, required VoidCallback onPressed, double height = 48, double? width, double radius = 2, Duration duration = const Duration(milliseconds: 300), bool? selected, BoxBorder? border, EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16), AlignmentGeometry alignment = Alignment.center, RevealDirection revealDirection = RevealDirection.fromClick})
Crea un RectRevealButton.
const

Properties

alignment → AlignmentGeometry
Alineación del contenido dentro del botón.
final
backgroundColorA → Color
Color de fondo cuando está seleccionado. Debe ser diferente de backgroundColorB.
final
backgroundColorB → Color
Color de fondo cuando NO está seleccionado. Debe ser diferente de backgroundColorA.
final
border → BoxBorder?
Borde decorativo opcional del botón.
final
duration → Duration
Duración de la animación del reveal.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double
Altura del botón en píxeles.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onPressed → VoidCallback
Callback ejecutado al presionar el botón.
final
padding → EdgeInsetsGeometry
Padding interno del contenido del botón.
final
radius → double
Radio de las esquinas del botón en píxeles.
final
revealDirection → RevealDirection
Dirección desde donde se expande el efecto reveal.
final
rippleColorA → Color
Color del efecto reveal cuando está seleccionado. Debe ser diferente de rippleColorB.
final
rippleColorB → Color
Color del efecto reveal cuando NO está seleccionado. Debe ser diferente de rippleColorA.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selected → bool?
Estado inicial del botón (opcional, para control externo).
final
widgetA → Widget
Widget mostrado cuando el botón está en estado seleccionado (true).
final
widgetB → Widget
Widget mostrado cuando el botón está en estado no seleccionado (false).
final
width → double?
Ancho del botón en píxeles (opcional).
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<RectRevealButton>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited