Flutter skeleton view shimmer view

Question

I'm trying to achieve the skeleton view as shown in the attachment but couldn't get it exactly like shown, i have tried Shimmer package, the problem is gradient or mask width is more. Kindly help with sample for to achieve the same.

Used the shimmer: ^2.0.0

My ListView

return Padding(
    padding: const EdgeInsets.only(top: 16),
    child: ListView.builder(
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (context, index) {
        return ShimmerItem();
      },
      itemCount: 10,
    ),
  );

ShimmerItem Widget:

class ShimmerItem extends StatelessWidget {
const ShimmerItem({Key? key}) : super(key: key);
@override
 Widget build(BuildContext context) {
  return Card(
   margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
   shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  color: Theme.of(context).cardTheme.color,
  child: Container(
    margin: EdgeInsets.only(left: 16, bottom: 8, top: 8),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
            padding: const EdgeInsets.only(right: 32.0),
            child: ShimmerWidget.rectangular(
              height: 16,
              width: MediaQuery.of(context).size.width * 0.9,
            )),
        Padding(
          padding: const EdgeInsets.only(right: 32.0, top: 8),
          child: ShimmerWidget.rectangular(
            height: 16,
            width: MediaQuery.of(context).size.width * 0.6,
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 16, bottom: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ShimmerWidget.rectangular(
                height: 16,
                width: MediaQuery.of(context).size.width * 0.4,
              ),
              SizedBox(
                width: 10,
              ),
              ShimmerWidget.rectangular(
                height: 16,
                width: MediaQuery.of(context).size.width * 0.4,
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}
}

ShimmerWidget Class:

class ShimmerWidget extends StatelessWidget {
 final double width;
 final double height;
 final ShapeBorder shapeBorder;

 const ShimmerWidget.rectangular(
  {this.width = double.infinity, required this.height})
  : this.shapeBorder = const RoundedRectangleBorder();

 const ShimmerWidget.circular(
  {this.width = double.infinity,
  required this.height,
  this.shapeBorder = const CircleBorder()});

  @override
    Widget build(BuildContext context) => Shimmer.fromColors(
     baseColor:
                                                              
  ColorHelper.colorWithTransparency(AppColors.shimmer_bg_color, 
  100),
    highlightColor:
        
ColorHelper.colorWithTransparency(AppColors.shimmer_color_dark, 
  20),
    period: Duration(milliseconds: 1500),
    child: Container(
      width: width,
      height: height,
      decoration: ShapeDecoration(
        color: AppColors.shimmer_bg_color,
        shape: shapeBorder,
      ),
    ),
  );
 }

Answer 1

We can use LayoutBuilder for measurement, which is depending on parent size and perfect for this case.

To struct the same UI, I am just constructing the ShimmerItem widget, rest of widget will be same.

• To get rounded border I am using ClipRRect with providing borderRadius.

• Padding to control the sounded spacing and SizedBox to provide space on Column's children.

• Used Row's mainAxisAlignment: MainAxisAlignment.spaceBetween,to separate last two shimmer widgets.

Resource about layout-basics.

class ShimmerItem extends StatelessWidget {
  const ShimmerItem({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final _border = BorderRadius.circular(12);
    final double _bHeight = 24;
    return LayoutBuilder(
      builder: (context, constraints) => Padding(
        padding: const EdgeInsets.all(12.0), //outside the card
        child: Container(
          decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            color: Colors.grey,
          ),
          padding: const EdgeInsets.all(8), // inner padding
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //* top large two
              ClipRRect(
                borderRadius: _border,
                child: ShimmerWidget.rectangular(
                  height: _bHeight,
                  width: constraints.maxWidth,
                ),
              ),
              const SizedBox(height: 8),
              ClipRRect(
                borderRadius: _border,
                child: ShimmerWidget.rectangular(
                  height: _bHeight * .75,
                  width: constraints.maxWidth,
                ),
              ),
              const SizedBox(height: 8),
              //3rd row
              ClipRRect(
                borderRadius: _border,
                child: ShimmerWidget.rectangular(
                  height: _bHeight * .75,
                  width: constraints.maxWidth * 0.6,
                ),
              ),
              const SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ClipRRect(
                    borderRadius: _border,
                    child: ShimmerWidget.rectangular(
                      height: _bHeight,
                      width: constraints.maxWidth * 0.4,
                    ),
                  ),
                  ClipRRect(
                    borderRadius: _border,
                    child: ShimmerWidget.rectangular(
                      height: _bHeight,
                      width: constraints.maxWidth * 0.4,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I am using demo color.

Answer 2

You need wrap all your child inside 1 bigger Shimmer wrapper to do that, not Shimmer on every small retangle.

I have project code for this in my laptop but im working afar, sorry.