用碎片时间编写Flutter的简单爆炸效果

2024-01-04 22:14:46

在Flutter中实现简单的爆炸效果

最近业务上需要投入的时间比较多，没有太多的时间去学习Flutter一些比较深入的知识，于是只好用一些碎片时间来实现一些简单的Flutter动画了。

今天就来实现一个比较简单的爆炸效果，这个爆炸效果实现起来还是比较简单的，只需要用到Flutter的动画系统和粒子效果即可。

首先，我们先来创建一个新的Flutter项目，然后在pubspec.yaml文件中添加以下依赖：

dependencies:
  confetti: ^0.4.0

接下来，我们在lib文件夹下创建一个新的Dart文件，并命名为main.dart。在main.dart文件中，我们首先需要导入必要的库：

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

然后，我们在main()函数中创建一个新的ConfettiController对象：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Explode!'),
        ),
        body: Center(
          child: ConfettiWidget(
            confettiController: _confettiController,
            blastDirectionality: BlastDirectionality.explosive,
            particleDrag: 0.05,
            emissionFrequency: 0.05,
            numberOfParticles: 20,
            gravity: 0.05,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _explode,
          child: Icon(Icons.explode),
        ),
      ),
    );
  }

  late ConfettiController _confettiController;

  @override
  void initState() {
    super.initState();
    _confettiController = ConfettiController(duration: const Duration(seconds: 10));
  }

  void _explode() {
    _confettiController.play();
  }
}