Flutter占位符展示插件better_skeleton的使用

Glass effect - for your skeleton loading

显示一个玻璃效果，使用单个AnimationController控制多个Widgets的加载动画。

Developed with 💙  by Apparence.io

Tldr - features?

• 使用单个AnimationController在多个Widgets上显示玻璃效果

Getting Started

创建一个重复模式的动画控制器，然后将此控制器提供给每个AnimatedSkeleton。这个效果是通过自定义的RenderWidget实现的。

示例代码

import 'package:flutter/material.dart';
import 'package:better_skeleton/better_skeleton.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final AnimationController animationController;

  @override
  void initState() {
    super.initState();
    // 创建一个重复模式的动画控制器
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 1000))..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(height: 100),
            AnimatedSkeleton(
              listenable: animationController,
              child: FakeCard(),
            ),
            AnimatedSkeleton(
              listenable: animationController,
              child: FakeCard(),
            ),
            AnimatedSkeleton(
              listenable: animationController,
              child: FakeCard2(),
            ),
          ],
        ),
      ),
    );
  }
}

// 模拟卡片组件
class FakeCard extends StatelessWidget {
  const FakeCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        width: double.infinity,
        color: Colors.grey[300],
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Row(
            children: [
              Container(
                height: 40,
                width: 40,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.grey[400],
                ),
              ),
              SizedBox(width: 20),
              Expanded(
                child: Container(
                  height: 40,
                  decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(5)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 另一种模拟卡片组件
class FakeCard2 extends StatelessWidget {
  const FakeCard2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        width: double.infinity,
        color: Colors.grey[300],
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Row(
            children: [
              Container(
                height: 80,
                width: 80,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.grey[400],
                ),
              ),
              SizedBox(width: 20),
              Expanded(
                child: Column(
                  children: [
                    Container(
                      height: 40,
                      decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(5)),
                    ),
                    SizedBox(height: 16),
                    Container(
                      height: 40,
                      decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(5)),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个带有重复模式动画控制器的应用程序，并将其应用于三个AnimatedSkeleton组件。每个AnimatedSkeleton包含一个模拟卡片组件（FakeCard或FakeCard2），这些卡片展示了不同的布局和样式，以模拟实际内容的加载过程。