Flutter雪花特效或自定义动画插件snowfall_or_anythings的使用

Flutter雪花特效或自定义动画插件snowfall_or_anythings的使用

一个用于在您的应用程序中创建漂亮的雪花或其他粒子效果的 Flutter 包。

特性

• 易于使用
• 可自定义的粒子
• 高性能

安装

在 pubspec.yaml 文件中添加以下内容：

dependencies:
    snowfall_or_anythings: ^0.0.4

然后运行 flutter pub get 来安装该包。

使用

基本示例

class SnowPage extends StatelessWidget {
  const SnowPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snowfall Demo'),
      ),
      body: const SnowfallOrAnythings(
        numberOfParticles: 200,
        particleSize: 4.0,
        particleSpeed: 0.8,
        particleType: ParticleType.snowflake,
      ),
    );
  }
}

结果

自定义粒子

class CustomPaintpage extends StatelessWidget {
  const CustomPaintpage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CustomPainter Demo'),
      ),
      body: SnowfallOrAnythings(
        particleColor: Colors.green,
        numberOfParticles: 150,
        particleSize: 10.0,
        particleSpeed: 2.0,
        customPainter: ({required particles}) => CustomParticlePainter(particles),
      ),
    );
  }
}

class CustomParticlePainter extends CustomPainter {
  final List<Particle> particles;

  CustomParticlePainter(this.particles);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final paint = Paint();

    for (final particle in particles) {
      paint.color = particle.color;
      canvas.drawRect(
        Rect.fromCenter(
          center: Offset(particle.x, particle.y),
          width: particle.size,
          height: particle.size,
        ),
        paint,
      );
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

完整示例代码

import 'package:example/pages/custom_paint_page.dart';
import 'package:example/pages/snow_page.dart';
import 'package:example/pages/widget_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Particle Demo',
      theme: ThemeData.dark(),
      home: const MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Particle Effects Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const SnowPage(),
                  ),
                );
              },
              child: const Text('Snowfall Demo'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const CustomPaintpage(),
                  ),
                );
              },
              child: const Text('CustomPainter Demo'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const WidgetParticlePage(),
                  ),
                );
              },
              child: const Text('Widget Particle Demo'),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomPaintDemo {
  const CustomPaintDemo();
}