Flutter skeleton screen for Android and iOS. Support List, Card and Card-List style | Flutter Skeleton

17 May 2023
0
40

Flutter Skeleton

Flutter skeleton screen.

Usage

1. Depend

Add this to you package’s pubspec.yaml file:

dependencies:
  flutter_skeleton: ^0.1.0+1

2. Install

Run command:

$ flutter packages get

3. Import

Import in Dart code:

import 'package:flutter_skeleton/flutter_skeleton.dart';

4. Display Widget

// list skeleton
ListSkeleton(
  style: SkeletonStyle(
    theme: SkeletonTheme.Light,
    isShowAvatar: false,
    barCount: 3,
    colors: [Color(0xff333333), Color(0xffffff45), Color(0xff333333)],
    isAnimation: true,
  ),
);

// card skeleton
CardSkeleton(
  style: SkeletonStyle(
    theme: SkeletonTheme.Light,
    isShowAvatar: true,
    isCircleAvatar: false,
    borderRadius: BorderRadius.all(Radius.circular(16.0)),
    padding: EdgeInsets.all(32.0),
    barCount: 2,
    colors: [Color(0xffffffff)],
    backgroundColor: Color(0xFF009000),
    isAnimation: false,
  ),
);

// card list skeleton
CardListSkeleton(
  style: SkeletonStyle(
    theme: SkeletonTheme.Dark,
    isShowAvatar: true,
    isCircleAvatar: true,
    barCount: 2,
  ),
);

SkeletonStyle Properties

NameTypeMeaningDefaultisAnimationboolif show animation or nottrueisShowAvatarboolif show avatar or nottrueisCircleAvatarboolif the avatar is circle or nottruebarCountintthe count of bar2borderRadiusBorderRadiusthe radius of container0paddingEdgeInsetsthe padding of container16colorsListgradient color of barnull, specified by themebackgroundColorColorbackground color of containernull, specified by themethemeSkeletonThemepre-install themeSkeletonTheme.Light