Flutter – Widget de icono animado

La animación se ha convertido en una parte vital del diseño de la interfaz de usuario, ya sea una transición de una ventana a otra o el cierre de la ventana, la animación juega un papel importante en la representación fluida del proceso. Así cuando hacemos clic en el icono, muestra una animación, o se muestra otro icono en su lugar. En Flutter, esto se puede lograr con la ayuda de AnimatedIcon Widget. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.

 

Constructor

AnimatedIcon(
{Key? key, 
required AnimatedIconData icon, 
required Animation<double> progress, 
Color? color, 
double? size, 
String? semanticLabel, 
TextDirection? textDirection}
)

Propiedades

• color: El color a utilizar al dibujar el icono.
• hashCode: El código hash para este objeto.
• icono: El icono a mostrar. Los iconos disponibles se enumeran en AnimatedIcons.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• progreso: El progreso de la animación para el ícono animado.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• semanticLabel: Etiqueta semántica del icono.
• tamaño: el tamaño del icono en píxeles lógicos.
• textDirection: la dirección del texto que se utilizará para representar el icono.

Ejemplo

• Primero, crea el proyecto Flutter escribiendo «flutter create app_name» en la terminal.
• Luego, vaya a «principal. dardo” archivo. 

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

• En el archivo «main.dart», cree un widget con estado debajo de MyApp.

class GFG1 extends StatefulWidget {
  const GFG({ Key? key }) : super(key: key);
 
  @override
  State<GFG> createState() => _GFGState();
}
 
// Widget that will be shown
// at the start of application.
class _GFGState extends State<GFG> {
  @override
  Widget build(BuildContext context) {
     
    return Scaffold(
       
    );
  }
}

• Dentro de Scaffold, cree IconButton envuelto alrededor del widget Center que ayudará a que nuestro botón se centre. Luego proporcione AnimatedIcon con Icon y controlador para cambiar al ícono de verificación. 

class _GFGState extends State<GFG> with TickerProviderStateMixin {
   
  // The controller to change our animated icon
  late AnimationController _controller;
   
  // Boolean to check state of our icon
  bool isClicked = false;
  @override
  void initState() {
    // Initializing our controller
    _controller = AnimationController(
      duration: const Duration(
        milliseconds: 800,
      ),
      vsync: this,
    );
    super.initState();
  }
 
  @override
  void dispose() {
    // Disposing controller
    // when its not needed
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
          iconSize: 70,
          onPressed: () {
            // Setting icon animation
            // according isClicked variable
            if (isClicked) {
              _controller.forward();
            } else {
              _controller.reverse();
            }
            // Changing the value
            // of isClicked variable
            isClicked = !isClicked;
          },
          icon: AnimatedIcon(
            icon: AnimatedIcons.list_view,
            // providing controller
            // to the AnimatedIcon
            progress: _controller
          ),
        ),
      ),
    );
  }
}

Producción: