FLUI

# Skeleton

Skeleton provides a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

# FLSkeleton

You can configure shape, color, animation type, etc. The default animation type is FLSkeletonAnimationType.shimmer.

# shimmer

Container(
    padding: EdgeInsets.all(10),
    child: Card(
      child: Stack(
        children: <Widget>[
          FLSkeleton(
            shape: BoxShape.circle,
            margin: EdgeInsets.only(top: 10, left: 10),
            width: 40,
            height: 40,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 10, right: 10),
            height: 20,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 40),
            width: 300,
            height: 20,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 70, bottom: 10),
            width: 100,
            height: 20,
          ),
        ],
      ),
    )
)

# stretch

Container(
    padding: EdgeInsets.all(10),
    child: Card(
      child: Container(
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            FLSkeleton(
              shape: BoxShape.circle,
              margin: EdgeInsets.only(top: 10, left: 10),
              active: false,
              width: 40,
              height: 40,
            ),
            FLSkeleton(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(2),
              type: FLSkeletonAnimationType.stretch,
              margin: EdgeInsets.only(left: 60, top: 10, right: 10),
              height: 20,
              width: 320,
              stretchWidth: 100,
            ),
            FLSkeleton(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(2),
              type: FLSkeletonAnimationType.stretch,
              margin: EdgeInsets.only(left: 60, top: 40),
              width: 300,
              stretchWidth: 150,
              height: 20,
            ),
            FLSkeleton(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(2),
              type: FLSkeletonAnimationType.stretch,
              margin: EdgeInsets.only(left: 60, top: 70, bottom: 10),
              width: 100,
              stretchWidth: 200,
              height: 20,
            ),
          ],
        ),
      )
    )
)

# no animation

You only need to set the active property to false and not show the animation.

Container(
    padding: EdgeInsets.all(10),
    child: Card(
      child: Stack(
        children: <Widget>[
          FLSkeleton(
            shape: BoxShape.circle,
            margin: EdgeInsets.only(top: 10, left: 10),
            active: false,
            width: 40,
            height: 40,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 10, right: 10),
            active: false,
            height: 20,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 40),
            active: false,
            width: 300,
            height: 20,
          ),
          FLSkeleton(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(2),
            margin: EdgeInsets.only(left: 60, top: 70, bottom: 10),
            active: false,
            width: 100,
            height: 20,
          ),
        ],
      ),
    )
)

# API

# FLSkeleton

property description type default value
shape shape BoxShape
padding padding EdgeInsetsGeometry
color main color Color
shimmerColor shimmer color Color
width width double
height height double
margin margin EdgeInsetsGeometry
borderRadius border corner radius BorderRadiusGeometry
duration animation duration Duration
active animation is active or not bool true
type animation type FLSkeletonAnimationType FLSkeletonAnimationType.shimmer
stretchWidth stretch animation target width double

← BottomSheet →