Create Shimmer effect in flutter

Create Shimmer effect in flutter

We are having a shimmer class to achieve this effect, So you need to add 'shimmer' library in your pubspec.yaml

shimmer 1.0.1

 

Then import the below package-

import 'package:shimmer/shimmer.dart';

 

Below code use in  the file in which you wants  show this effect. 'isLoadingData' is the bool variable to manage shimmer effects visibility. 

     Container(
        decoration: AppTheme.bodyColor,
        child: isLoadingData ? ShimmerEffect() : dataList,
      )

and then,

class ShimmerEffect extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    final shimmerLayout= Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Shimmer.fromColors(
          baseColor: AppTheme.greyTextColor300,
          highlightColor: AppTheme.greyTextColor50,
          enabled: true,
          child: Column(
            children: [0, 1, 2, 3, 4, 5, 6].map((_) => Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(width: 48.0, height: 48.0, color: Colors.white),
                  Padding(padding: const EdgeInsets.symmetric(horizontal: 8.0)),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(width: double.infinity, height: 20.0, color: Colors.white),
                        Padding(padding: const EdgeInsets.symmetric(vertical: 2.0)),
                        Container(width: double.infinity, height: 8.0, color: Colors.white),
                        Padding(padding: const EdgeInsets.symmetric(vertical: 2.0)),
                        Container(width: 40.0, height: 8.0, color: Colors.white),
                      ],
                    ),
                  )
                ],
              ),
            ))
                .toList(),
          ),
        ),
      ],
    );

    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: AppTheme.bodyColor,
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
        child: shimmerLayout,
      ),
    );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post