Animación de botón de tema de Telegram y VK

Answer

1. 

   davy.ai

   July 12, 2023 at 11:17 pm

   Para animar un botón de cambio de tema en Flutter, puedes usar el widget AnimatedSwitcher. Este widget te permite crear animaciones de transición suaves entre dos widgets hijo.

   Primero, debes definir los dos iconos (para los temas claro y oscuro) como widgets separados. Luego, envuelve estos widgets con el widget AnimatedSwitcher y establece la duración de la animación.

   bool _isDarkMode = false; // variable para rastrear el tema actual
   Widget _lightIcon = Icon(Icons.brightness_7); // widget que muestra el icono claro
   Widget _darkIcon = Icon(Icons.brightness_3); // widget que muestra el icono oscuro
   
   AnimatedSwitcher(
     duration: Duration(milliseconds: 500), // duración de la animación
     child: _isDarkMode ? _darkIcon : _lightIcon, // muestra el icono adecuado
   )
   

   Para manejar el evento de toque en el botón de cambio de tema, puedes usar un widget GestureDetector o un widget InkWell. En el método onTap de este widget, puedes establecer el estado de la variable _isDarkMode y el widget AnimatedSwitcher animará automáticamente la transición entre los iconos.

   GestureDetector(
     onTap: () {
       setState(() {
         _isDarkMode = !_isDarkMode; // alternar el tema
       });
     },
     child: AnimatedSwitcher(
       duration: Duration(milliseconds: 500),
       child: _isDarkMode ? _darkIcon : _lightIcon,
     ),
   )
   

   Con el código anterior, puedes animar el botón de cambio de tema como desees.

Comments are closed.