flutter_shimmer icon indicating copy to clipboard operation
flutter_shimmer copied to clipboard

Animation is taking whole element not individual widgets

Open troncomputers opened this issue 3 years ago • 1 comments

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?

troncomputers avatar Jan 04 '22 08:01 troncomputers

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

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

i2gor87 avatar Mar 17 '22 11:03 i2gor87