Flutter Why Shimmer loading effect doesn't work on IOS? - flutter

Question

I follow the flutter documentation create a shimmer loading effect class like below
import 'package:flutter/widgets.dart';
const _shimmerGradient = LinearGradient(
colors: [
Color(0xFFEBEBF4),
Color(0xFFF00000),
Color(0xFFEBEBF4),
],
stops: [
0.1,
0.3,
0.4,
],
begin: Alignment(-1.0, -0.3),
end: Alignment(1.0, 0.3),
tileMode: TileMode.clamp,
);
class ShimmerLoading extends StatefulWidget {
const ShimmerLoading({
super.key,
required this.isLoading,
required this.child,
});
final bool isLoading;
final Widget child;
#override
State<ShimmerLoading> createState() => _ShimmerLoadingState();
}
class _ShimmerLoadingState extends State<ShimmerLoading> {
#override
Widget build(BuildContext context) {
if (!widget.isLoading) {
return widget.child;
}
return ShaderMask(
blendMode: BlendMode.srcATop,
shaderCallback: (bounds) {
return _shimmerGradient.createShader(bounds);
},
child: widget.child,
);
}
}
and i implement it on test screen.
test_screen.dart
class _TestScreenState extends BaseConsumerState<TestScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
...
ShimmerLoading(
isLoading: true,
child: Container(
width: 200,
height: 50,
color: Colors.red,
),
),
...
}
}
I tested it on the emulator.
It works on Android but doesn't work on IOS.
How can I make sure that will work on the real device?
IOS' screen
the black square is a shimmer loading effect.

Answer 1

Try Shimmer Package
Package From here