Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Shimmer fully covers child widget ui #48

Closed
II11II opened this issue May 1, 2021 · 1 comment
Closed

[BUG] Shimmer fully covers child widget ui #48

II11II opened this issue May 1, 2021 · 1 comment

Comments

@II11II
Copy link

II11II commented May 1, 2021

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

@II11II II11II changed the title [BUG] Shimmer fully cover child widget of ui [BUG] Shimmer fully covers child widget ui May 1, 2021
@hnvn
Copy link
Owner

hnvn commented Jun 21, 2021

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

@hnvn hnvn closed this as completed Jun 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants