Flutter – Usando el Avatar Glow

Flutter tiene un paquete llamado avatar_glow que proporciona un Avatar Glow Widget con una genial animación brillante de fondo. En este artículo, exploraremos el mismo paquete con un ejemplo.

Implementación:

Primero, agregue la dependencia al archivo pubspec.yaml como se muestra a continuación:

Ahora importa el siguiente código a tu archivo main.dart:

import 'package:avatar_glow/avatar_glow.dart';

A. El código de muestra para crear se proporciona a continuación:

Avatar(
glowColor:Colors.teal,
showTwoGlows:false,
endRadius:80.0,
child: // Any widget(circle avatar , sizedbox etc)
)

Ejemplo:

import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(Avatarglow());
}
  
class Avatarglow extends StatelessWidget {
  const Avatarglow({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Geeks for Geeks"),
          centerTitle: true,
          backgroundColor: Colors.green,
        ),//AppBar
        body: Center(
          child: AvatarGlow(
            glowColor: Colors.green,
            endRadius: 90.0,
            duration: Duration(milliseconds: 2000),
            repeat: true,
            showTwoGlows: true,
            repeatPauseDuration: Duration(milliseconds: 100),
            child: Material(
              // Replace this child with your own
              elevation: 8.0,
              shape: CircleBorder(),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: CircleAvatar(
                  backgroundColor: Colors.grey[100],
                  child: Image.network(
                    "https://external-content.duckduckgo.com
                    /iu/?u=https%3A%2F%2Fmedia.geeksforgeeks.
                    org%2Fwp-content%2Fcdn-uploads%2Fgfg_200X200.png&f=1&nofb=1",
                    fit: BoxFit.fill,
                  ),// image
                  radius: 40.0,
                ),// circleAvatar
              ),// ClipRRect
            ),// Material 
          ),// avatarglow
        ),// center
      ),// Scaffold
    ); // MaterialApp
  }
}

Producción:

Explicación : 

Ahora entendamos el ejemplo anterior:

• El principal es un método principal que se llama una vez que se carga el programa.
• Una vez que se carga un programa, el método runApp se ejecutará y llamará a la clase que creamos (Avatarglow) para que se ejecute.
• Esta clase no tiene estado, ya que solo queremos mostrar solo la imagen brillante.
• Como flutter se basa en widgets, se debe construir un widget.
• Creando una App Material que nos permita usar un andamio. Scaffold nos permite usar AppBar y Body.
• La barra de aplicaciones tiene un texto simple «Geeks for Geeks» y título central: verdadero.
• El cuerpo contiene un diseño centrado que toma AvatarGLow .
• La propiedad glowColor establece el color brillante.
• El showTwoGlows cuando se establece en falso muestra el primer resplandor cuando se establece en verdadero muestra el segundo resplandor.
• El radio del rango endRadius que brilla finaliza.
• Como niño, puede configurar cualquier widget, aquí tenemos una imagen de red.