[Day24] Flutter with GetX Shimmer

Shimmer

iOS Swift的话是类似SkeletonView
一般用在等待的时候 像是API fetch data
这边用前几篇的News API, 把转圈圈修改成Shimmer

先是建立Shimmer widget class
再来是建立摆在ListView里面的 Shimmer cell (ListViewShimmer)
这样就可以直接替换成ListView效果

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

  ShimmerWidget.rectangle({
    this.width = double.infinity,
    required this.height,
    this.borderRadius = 8,
  });

  @override
  Widget build(BuildContext context) {
    shapeBorder = RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(borderRadius));
    return Shimmer.fromColors(
      child: Container(
        width: width,
        height: height,
        decoration: ShapeDecoration(
          color: Colors.grey[400]!,
          shape: shapeBorder,
        ),
      ),
      baseColor: Colors.grey[400]!,
      highlightColor: Colors.grey[200]!,
    );
  }
}

class ListViewShimmer extends StatelessWidget {
  ListViewShimmer({Key? key, this.cellCount = 3}) : super(key: key);

  final int cellCount;
  final cellWidth = Get.width * 0.95;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        ListView.builder(
          physics: BouncingScrollPhysics(),
          shrinkWrap: true,
          itemCount: cellCount,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: ListTile(
                title: ShimmerWidget.rectangle(height: 15),
                subtitle: ShimmerWidget.rectangle(height: 10),
              ),
            );
          },
        ),
      ],
    );
  }
}

本篇的GitHub source code

下一篇将为大家介绍Shimmer和 API fetch之间的切换
AnimatedSwitcher with API fetch