hnvn / flutter_shimmer

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

Animation is taking whole element not individual widgets #55

Open troncomputers opened 2 years ago

troncomputers commented 2 years ago

Shimmer not applied:

  1. Container -> BorderRadius
  2. Animation to elements inside

shimmer_animation

  Widget productsLoading() {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: ListView.separated(
          itemBuilder: (_, __) => Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10),
              ),
            ),
            child: Card(
              color: Colors.white,
              elevation: 0,
              child: Container(
                height: 90,
                color: Colors.white,
                padding: EdgeInsets.all(5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 70,
                      height: 70,
                      child: SizedBox(
                        height: 65,
                        width: 65,
                      ),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(
                            width: double.infinity,
                            height: 20,
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          SizedBox(
                            width: double.infinity,
                            height: 20,
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              SizedBox(
                                width: 50,
                                height: 20,
                              ),
                              SizedBox(
                                width: 50,
                                height: 20,
                              )
                            ],
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          separatorBuilder: (_, __) => SizedBox(
            height: 7,
          ),
          itemCount: 7,
        ),
      ),
    );
  }

What am I doing wrong?

i2gor87 commented 2 years ago

Just had similar problem. Try to wrap each widget with shimmer like

List<Widget> shimmerList = List.filled(10, Shimmer.fromColors(...));