Skip to content

Introduce shimmering loader placeholders #71

@nivisi

Description

@nivisi
  1. A widget that adds a preconfigured shimmering parent.

  2. A widget for building the actual shapes, e.g.

     /// Pre-configured widget for adding loading shapes to the screen.
     class PlaceholderShape extends StatelessWidget {
       const PlaceholderShape({
         super.key,
         this.width,
         this.height,
         this.borderRadius,
         this.color,
       });
     
       const PlaceholderShape.square({
         super.key,
         double? size,
         this.borderRadius,
         this.color,
       })  : width = size,
             height = size;
     
       /// A rectangular shape that has the size of the text with the given style.
       PlaceholderShape.fromText({
         super.key,
         required String text,
         required TextStyle textStyle,
         this.borderRadius,
         this.color,
       })  : width = text.getSize(textStyle).width,
             height = text.getSize(textStyle).height;  
     
       final double? width;
       final double? height;
       final double? borderRadius;
       final Color? color;  
     
       @override
       Widget build(BuildContext context) {
         // TODO: Setup the default colour.
         final defaultColor = Colors.white54;
         
         return ClipRRect(
           borderRadius: BorderRadius.all(Radius.circular(borderRadius ?? .0)),
           child: SizedBox(
             width: width,
             height: height,
             child: ColoredBox(color: color ?? defaultColor),
           ),
         );
       }
     }
  3. So it can be used like this:

    AppShimmer(
      child: Column(
        children: [
            LoadingPlaceholderShape(...),
            LoadingPlaceholderShape(...),
        ],
      ),
    // or
    AppShimmer.column(
      children: [
        LoadingPlaceholderShape(...),
        LoadingPlaceholderShape(...),
      ],
    ),
    // or
    AppShimmer.row(
      children: [
        LoadingPlaceholderShape(...),
        LoadingPlaceholderShape(...),
      ],
    ),

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions