A Flutter package for building custom skeleton widgets to mimic the page’s layout while loading

skeletons

a flutter package for building custom skeleton widgets to mimic the page’s layout while loading.

examples

items		listview (default)

listview (custom)	listview (complex cards)	skeletontheme

light/dark modes	right-to-left	custom shimmer

all examples can be found here examples.

how to use

can be used by encapsulating the child widget in a skeleton widget:

import 'package:skeletons/skeletons.dart';

skeleton(
        isloading: _isloading,
        skeleton: skeletonlistview(),
        child: container(child: center(child: text("content"))),
      )

or directly:

container(
    child: _isloading 
    ? skeletonlistview() 
    : container(child: center(
                       child: text("content"))),
)

a skeletontheme can be used to set the default configs for all skeleton descendants in the tree.

skeletontheme(
    // thememode: thememode.light,
    shimmergradient: lineargradient(
        colors: [
          color(0xffd8e3e7),
          color(0xffc8d5da),
          color(0xffd8e3e7),
        ],
        stops: [
          0.1,
          0.5,
          0.9,
        ],
      ),
      darkshimmergradient: lineargradient(
        colors: [
          color(0xff222222),
          color(0xff242424),
          color(0xff2b2b2b),
          color(0xff242424),
          color(0xff222222),
        ],
        stops: [
          0.0,
          0.2,
          0.5,
          0.8,
          1,
        ],
        begin: alignment(-2.4, -0.2),
        end: alignment(2.4, 0.2),
        tilemode: tilemode.clamp,
      ),
        child: materiaapp(
            ...
        ),
      ),

more customization:

listview (complex cards)

for more complex shapes you can build your skeleton inside a skeletonitem widget:

listview.builder(
  physics: neverscrollablescrollphysics(),
  itemcount: 5,
  itembuilder: (context, index) => padding(
    padding: const edgeinsets.all(8.0),
    child: container(
      padding: const edgeinsets.all(8.0),
      decoration: boxdecoration(color: colors.white),
      child: skeletonitem(
          child: column(
        children: [
          row(
            children: [
              skeletonavatar(
                style: skeletonavatarstyle(
                    shape: boxshape.circle, width: 50, height: 50),
              ),
              sizedbox(width: 8),
              expanded(
                child: skeletonparagraph(
                  style: skeletonparagraphstyle(
                      lines: 3,
                      spacing: 6,
                      linestyle: skeletonlinestyle(
                        randomlength: true,
                        height: 10,
                        borderradius: borderradius.circular(8),
                        minlength: mediaquery.of(context).size.width / 6,
                        maxlength: mediaquery.of(context).size.width / 3,
                      )),
                ),
              )
            ],
          ),
          sizedbox(height: 12),
          skeletonparagraph(
            style: skeletonparagraphstyle(
                lines: 3,
                spacing: 6,
                linestyle: skeletonlinestyle(
                  randomlength: true,
                  height: 10,
                  borderradius: borderradius.circular(8),
                  minlength: mediaquery.of(context).size.width / 2,
                )),
          ),
          sizedbox(height: 12),
          skeletonavatar(
            style: skeletonavatarstyle(
              width: double.infinity,
              minheight: mediaquery.of(context).size.height / 8,
              maxheight: mediaquery.of(context).size.height / 3,
            ),
          ),
          sizedbox(height: 8),
          row(
            mainaxisalignment: mainaxisalignment.spacebetween,
            children: [
              row(
                children: [
                  skeletonavatar(
                      style: skeletonavatarstyle(width: 20, height: 20)),
                  sizedbox(width: 8),
                  skeletonavatar(
                      style: skeletonavatarstyle(width: 20, height: 20)),
                  sizedbox(width: 8),
                  skeletonavatar(
                      style: skeletonavatarstyle(width: 20, height: 20)),
                ],
              ),
              skeletonline(
                style: skeletonlinestyle(
                    height: 16,
                    width: 64,
                    borderradius: borderradius.circular(8)),
              )
            ],
          )
        ],
      )),
    ),
  ),
);