Utilizzare il widget AvatarGlow in Flutter

Mattepuffo's logo
Utilizzare il widget AvatarGlow in Flutter

Utilizzare il widget AvatarGlow in Flutter

Il package avatar_glow di Flutter ci fornisce il widget AvatarGlow che ci consente di animare una immagine con un effetto, appunto, glow.

Può essere utile per dare un pò di animazione alle nostre schermate.

Potete installarlo aggiungendo la dipendenza al file pubspec.yaml:

dependencies:
  avatar_glow: any

Qui sotto un esempio di codice:

import 'package:flutter/material.dart';
import 'package:avatar_glow/avatar_glow.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Launcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: AvatarGlow(
                  glowColor: Colors.orange,
                  endRadius: 90.0,
                  duration: const Duration(milliseconds: 1500),
                  repeat: true,
                  showTwoGlows: true,
                  repeatPauseDuration: const Duration(milliseconds: 200),
                  child: Material(
                    elevation: 9.0,
                    shape: const CircleBorder(),
                    child: CircleAvatar(
                      backgroundColor: Colors.grey[100],
                      radius: 40.0,
                      child: Image.network(
                          "https://www.mattepuffo.com/blog/images/apple-touch-icon.png"),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Enjoy!


Condividi

Commentami!