Flutter – Animación de revelación circular

La animación Circular Reveal en Flutter está inspirada en ViewAnimationUtils.createCircularReveal(…). Hace exactamente lo que sugiere el nombre, lo que significa que se usa para revelar contenido, generalmente una imagen circular donde el círculo crece y hace que la imagen sea visible.

En este artículo, implementaremos una animación de revelación circular simple a través de una aplicación simple. Para construir el mismo, siga los siguientes pasos:

• Agregue la dependencia al archivo pubspec.yaml.
• Cree un directorio de imágenes y agregue las imágenes que se van a revelar en el mismo.
• Activar los activos en el archivo pubspec.yaml
• Importe la dependencia al archivo main.dart
• Cree la raíz de la aplicación extendiendo un StatelessWidget
• Diseñe la página de inicio extendiendo un StatefulWidget
• En el cuerpo de la página de inicio, llame a CircularRevealAnimation().
• Agregue un botón de acción flotante y asígnele una acción para revelar la imagen.

Veamos los pasos en detalle.

Agregar la dependencia

Agregue la dependencia circular_reveal_animation en la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:

Dependencia

Adición de imágenes

Las imágenes que se revelarán mediante la animación de revelación circular se pueden agregar a un directorio de imágenes dentro del directorio de activos, como se muestra a continuación:

Adición de imágenes

Activación de activos

En el archivo pubspec.yanl , los activos se pueden activar para usar en la aplicación agregando una ruta a la imagen como se muestra a continuación en la sección de activos:

Activación de activos

Importación de la dependencia

Use la siguiente línea de código en el archivo main.dart para usar la dependencia circular_reveal_animation :

import 'package:circular_reveal_animation/circular_reveal_animation.dart';

Creación de la raíz de la aplicación

Extienda un StatelessWidget para crear una raíz para la aplicación como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

Crear la página de inicio

Extienda un StatefulWidget a una barra de aplicaciones y un cuerpo para crear una página de inicio plana para la aplicación como se muestra a continuación:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: 
      ),

Llamando a la dependencia

En el cuerpo de la página de inicio, haga una llamada a la función CircularRevealAnimation() y agregue las imágenes a la misma como se muestra a continuación:

body: Padding(
       padding: const EdgeInsets.all(16.0),
       child: Center(
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             SizedBox(height: 16),
             CircularRevealAnimation(
               child: Image.asset('assets/wonderwomen.jpg'),
               animation: animation,
               centerAlignment: Alignment.centerRight,
               centerOffset: Offset(130, 100),
               minRadius: 12,
               maxRadius: 200,
             ),
           ],
         ),
       ),
     ),

Añadir botón

Agregue un FloatingActionButton y asígnele la acción que llama a CircularRevealAnimation() desde la dependencia presionada como se muestra a continuación:

floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.green,
          onPressed: () {
        if (animationController.status == AnimationStatus.forward ||
            animationController.status == AnimationStatus.completed) {
          animationController.reverse();
        } else {
          animationController.forward();
        }
      }),
    );

Código fuente completo:

import 'package:circular_reveal_animation/circular_reveal_animation.dart';
import 'package:flutter/material.dart';
  
  
void main() => runApp(MyApp());
  
// root
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
  
// Homepage
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
  
  // initialize state
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    );
    animation = CurvedAnimation(
      parent: animationController,
      curve: Curves.easeIn,
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(height: 16),
              CircularRevealAnimation(
                child: Image.asset('assets/wonderwomen.jpg'),
                animation: animation,
                centerAlignment: Alignment.centerRight,
                centerOffset: Offset(130, 100),
                minRadius: 12,
                maxRadius: 200,
              ),
            ],
          ),
        ),
      ),
        
      // button with assigned action
      floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.green,
          onPressed: () {
        if (animationController.status == AnimationStatus.forward ||
            animationController.status == AnimationStatus.completed) {
          animationController.reverse();
        } else {
          animationController.forward();
        }
      }),
    );
  }
  
  }

Producción: