我按照the flutter documentation创建一个微光加载效果类,如下所示
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,
);
}
}
我在测试屏幕上实现了它。
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,
),
),
...
}
}
我在模拟器上测试了它。它可以在Android上工作,但不能在IOS上工作。我如何才能确保它能在真实的设备上工作?
iOS的屏幕上的黑色方块是一个微光加载效果。
1条答案
按热度按时间nzk0hqpo1#
试试微光套装
Package From here