hnvn / flutter_shimmer

A package provides an easy way to add shimmer effect in Flutter project
BSD 3-Clause "New" or "Revised" License
1.77k stars 200 forks source link

[BUG] Shimmer fully covers child widget ui #48

Closed II11II closed 3 years ago

II11II commented 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: Obtained Output Expected Output: Expected Output

hnvn commented 3 years ago

Remove color of your Container, as noted in library code document, the shimmer will effect on opaque area