Closed II11II closed 3 years ago
Shimmer v 2.0 flutter v 2.0.5
Code:
class AnnouncementImageTileLoading extends StatelessWidget { @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; return Shimmer.fromColors( baseColor: AppColors.greyW300, highlightColor: AppColors.greyW100, child: Container( height: size.width / 3, width: 343, decoration: BoxDecoration( borderRadius: BorderRadius.circular(24), color: AppColors.white, border: Border.all(color: AppColors.greyW300)), child: Row( children: [ Flexible( flex: 4, child: ClipRRect( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(24), topLeft: Radius.circular(24), topRight: Radius.circular(24)), child: Stack( children: [ Container( color: AppColors.greyW200, height: size.width / 3, ), Positioned( bottom: 0, right: 0, child: Container( height: 32, width: 46, decoration: BoxDecoration( color: AppColors.greyW200, borderRadius: BorderRadius.only( topLeft: Radius.circular(8), )), child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Icon( IconsYool.view, color: AppColors.white, ), Container(color: AppColors.white, height: 12) ], ), ), ), ], ), )), Flexible( flex: 6, child: Padding( padding: const EdgeInsets.all(10.0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 14, color: AppColors.greyW200, ), Padding( padding: const EdgeInsets.only(top: 10), child: Container( height: 16, color: AppColors.greyW600, )), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ Expanded( child: Container( height: 14, color: AppColors.greyW200)), Icon(Icons.bookmark_border) ], ) ], ), )) ], ), ), ); } }
Obtained Output: Expected Output:
Remove color of your Container, as noted in library code document, the shimmer will effect on opaque area
color
Container
Shimmer v 2.0 flutter v 2.0.5
Code:
Obtained Output:
Expected Output:
![Expected Output](https://user-images.githubusercontent.com/45257709/116796180-0c4c4800-aaf4-11eb-9c64-d6ccc6c457bf.png)