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!
dart flutter fancy_shimmer
Commentami!