Effetto shimmer su caricamento di immagini in Flutter

fancy_shimmer è sostanzialmente un piccolo package per Flutter che ci da un effetto shimmer in fase di caricamento di immagini.

Può essere utile quando carichiamo svariate immagini dalla rete, in quanto ci da quell'effetto di caricamento che avverte l'utente che la app sta facendo qualcosa.

Per installarlo:

flutter pub add fancy_shimmer_image

Qui sotto un esempio:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // https://picsum.photos/200
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: FancyShimmerImage(
          imageUrl: 'https://picsum.photos/200',
          errorWidget: Image.network('https://picsum.photos/300'),
          shimmerBaseColor: Colors.amber,
          shimmerHighlightColor: Colors.green,
          shimmerBackColor: Colors.orange,
        ),
      ),
    );
  }
}

Enjoy!