我們在載入列表的時候，資料沒請求下來之前，一般會有個載入對話方塊的互動，也有閃爍骨架屏互動，下面我們在flutter中實現閃爍骨架屏的互動。
1,新增依賴
shimmer: ^1.0.0
複製程式碼2，獲取依賴包
flutter pub get
複製程式碼3，匯入需要使用的檔案中
import 'package:shimmer/shimmer.dart';
複製程式碼4,使用
class MyShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
child: Shimmer.fromColors(
baseColor: Colors.grey,
highlightColor: Colors.white,
child: Column(
children: <Widget>[
CoinRankingListItemSkeleton(),
CoinRankingListItemSkeleton(),
CoinRankingListItemSkeleton(),
CoinRankingListItemSkeleton(),
CoinRankingListItemSkeleton(),
CoinRankingListItemSkeleton(),
],
),
),
);
}
}
class CoinRankingListItemSkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
height: 80.0,
child: Row(
children: <Widget>[
Container(width: 100.0, height: 100.0, color: Colors.grey),
SizedBox(width: 10.0),
Expanded(
child: Container(
child: Column(
children: <Widget>[
Container(height: 10.0, color: Colors.grey),
SizedBox(height: 10),
Container(height: 10.0, color: Colors.grey),
SizedBox(height: 10),
Container(height: 10.0, color: Colors.grey),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(width:50.0,height: 10.0, color: Colors.grey),
Container(width:70.0,height: 10.0, color: Colors.grey),
Container(width:20.0,height: 10.0, color: Colors.grey),
],
)
],
),
))
],
),
);
}
}
複製程式碼5,執行檢視效果
