Flutter – Achieve flickering effect

When we load a list, there will be a load dialog before the data is requested. There will also be a flickering skeleton screen. Now we will implement the flickering skeleton screen in flutter.

1. Add dependencies

Shimmer: ^ 1.0.0Copy the code

2. Obtain dependency packages

flutter pub get
Copy the code

3. Import the required file

import 'package:shimmer/shimmer.dart';
Copy the code

4, the use of

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) {
    returnContainer(margin: EdgeInsets. FromLTRB (10, 5, 10, 5), height: 80.0, child: Row(children: <Widget> 100.0, height: 100.0, color: color.grey), SizedBox(width: 10.0), Expanded(Child: Container(Child: Column(children: <Widget>[Container(height: 10.0, color: color.grey), SizedBox(height: 10), Container(height: 10.0, color: color.grey), Color.grey), SizedBox(height: 10), Container(height: 10.0, color: color.grey), SizedBox(height: 10) 10), Row (mainAxisAlignment: mainAxisAlignment spaceBetween, children: < widgets > [Container (width: 50.0, height: Color: color. grey), color: color. grey (width:70.0,height: 10.0, color: color. grey), color: color. grey (width:20.0,height: 20.0) 10.0, color: Colors, grey),]],))))); }}Copy the code

5, run to see the effect