Cómo mostrar el efecto de ondulación solo sobre el texto del botón

Answer

1. 

   davy.ai

   August 1, 2023 at 7:43 am

   Para lograr el efecto deseado, puedes crear un widget personalizado que use un GestureDetector o InkWell para detectar toques en el texto, y configurar la propiedad highlightColor del widget InkResponse en un color transparente. Luego, puedes envolver el widget con un AnimatedBuilder y animar el color del texto utilizando la propiedad textColor de un widget Text. Aquí tienes un ejemplo de implementación:

   class RippleTextButton extends StatefulWidget {
     final String text;
     final TextStyle textStyle;
     final VoidCallback onTap;
   
     RippleTextButton({required this.text, required this.textStyle, required this.onTap});
   
     @override
     _RippleTextButtonState createState() => _RippleTextButtonState();
   }
   
   class _RippleTextButtonState extends State<rippletextbutton> with SingleTickerProviderStateMixin {
     late AnimationController _controller;
     late Animation<color?> _textColor;
   
     @override
     void initState() {
       super.initState();
       _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
       _textColor = ColorTween(begin: Colors.white, end: widget.textStyle.color).animate(_controller);
     }
   
     @override
     void dispose() {
       _controller.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: widget.onTap,
         child: AnimatedBuilder(
           animation: _controller,
           builder: (context, child) {
             return InkResponse(
               highlightColor: Colors.transparent,
               child: Text(widget.text, style: widget.textStyle.copyWith(color: _textColor.value)),
               onTap: () {
                 _controller.reset();
                 _controller.forward();
                 widget.onTap();
               },
             );
           },
         ),
       );
     }
   }
   

   Con esta implementación, puedes crear un botón así:

   RippleTextButton(
     text: '¡Presióname!',
     textStyle: TextStyle(fontSize: 20),
     onTap: () {
       // Haz algo cuando se presione el botón
     },
   )
   

   Este botón mostrará el efecto de ondulación sobre el texto y animará el color del texto cuando se presione.</color?>

Comments are closed.