flutter 축하하는 화면 (Confetti example)

Confetti는 색종이 조각이라는 뜻이다. 

 

flutter에 색종이 조각이 막 날리는 화면 library가 있다

 

https://pub.dev/packages/confetti

confetti | Flutter Package

 

 

https://www.youtube.com/watch?v=dGMVyUY4-6M 

 

꽤 괜찮은 것을 볼 수 있다.

이걸 설정값을 바꿔보자~

 

 

 

 

 

관련 예제 코드는 아래와 같다

 

 

class MyConfetti extends StatefulWidget {
  const MyConfetti({Key? key}) : super(key: key);

  @override
  State<MyConfetti> createState() => _MyConfettiState();
}

class _MyConfettiState extends State<MyConfetti> {
  late ConfettiController _confettiController;
  @override
  void initState() {
    super.initState();
    _confettiController = ConfettiController(duration: const Duration(seconds: 10));
  }

  @override
  void dispose() {
    _confettiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(),
          body: Align(
            alignment: Alignment.bottomCenter,
            child: TextButton(
                onPressed: () {
                  _confettiController.play();
                },
                child: _display('hard and infrequent')),
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: ConfettiWidget(
            confettiController: _confettiController,
            blastDirectionality: BlastDirectionality.explosive,
            blastDirection: -pi / 2,
            emissionFrequency: 0.005,
            numberOfParticles: 100,
            maxBlastForce: 20,
            minBlastForce: 13,
            gravity: 0.03,
          ),
        ),
      ],
    );
  }

  Text _display(String text) {
    return Text(
      text,
      style: const TextStyle(color: Colors.black, fontSize: 20),
    );
  }
}

 

 

이제 이런 느낌을 

dialog 뒷편에다가 만들 예정이다. 

 

자고 일단 내일 해야겠다! 

 

 

자 그러면 내가 하고 싶은 뷰를 만들기 위해서, 일단은 Dialog에 넣어야한다. dialog에 넣고 conteffi는 Stack에서 뒤쪽으로 보내보았다. 

 

 

버튼으로 dialog 불러오는 코드: (GetX 사용하였습니다.)

TextButton(
    onPressed: () {
      Get.dialog(Dialog(
        child: MyConfetti(),
      ));
    },
    child: Text('Dialog1')),

 

뭔가 이제 내가 원하는 느낌으로 가게 된 것 같다. 

 

이제 이 scaffold를 위젯으로 바꿔주면 문제가 없을 것 같다. 

 

main 에서는 이런 식으로 넣어주는 걸로 바꿨다 (Dialog를 없앰- 왜냐면  DialogConteffi에서 AlertDialog를 넣어줄 것이기 때문에,,)

 

TextButton(
    onPressed: () {
      Get.dialog(DialogConfetti());
    },
    child: Text('Dialog1')),

 

 

그리고 나서, DialogConteffi 를 Dialog로 수정해주면 끝!

 

 

import 'dart:math';

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

class DialogConfetti extends StatefulWidget {
  const DialogConfetti({Key? key}) : super(key: key);

  @override
  State<DialogConfetti> createState() => _DialogConfettiState();
}

class _DialogConfettiState extends State<DialogConfetti> {
  late ConfettiController _confettiController;
  @override
  void initState() {
    super.initState();
    _confettiController = ConfettiController(duration: const Duration(seconds: 10))..play();
  }

  @override
  void dispose() {
    _confettiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: ConfettiWidget(
            confettiController: _confettiController,
            blastDirectionality: BlastDirectionality.explosive,
            blastDirection: -pi / 2,
            emissionFrequency: 0.005,
            numberOfParticles: 100,
            maxBlastForce: 20,
            minBlastForce: 13,
            gravity: 0.03,
          ),
        ),
        AlertDialog(
          content: Text('축하합니다. \n레벨이 상승하였습니다.'),
          actions: [TextButton(onPressed: (){
            Get.back();
          }, child: Text('확인'))],
        )
      ],
    );
  }
  
}

 

완료 화면

 

 

이렇게 사용하면 되고, 재사용성을 위해서 refactoring을 좀 해주었다. 

 

 

TextButton(
    onPressed: () {
      Get.dialog(DialogConfetti(AlertDialog(
        content: Text('축하합니다. \n레벨이 상승하였습니다.'),
        actions: [
          TextButton(
              onPressed: () {
                Get.back();
              },
              child: Text('확인'))
        ],
      )));
    },
    child: Text('Dialog1')),

 

 

import 'dart:math';

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

class DialogConfetti extends StatefulWidget {
  const DialogConfetti(this.alertDialog, {Key? key}) : super(key: key);
  final AlertDialog alertDialog;
  @override
  State<DialogConfetti> createState() => _DialogConfettiState();
}

class _DialogConfettiState extends State<DialogConfetti> {
  late ConfettiController _confettiController;
  @override
  void initState() {
    super.initState();
    _confettiController = ConfettiController(duration: const Duration(seconds: 10))..play();
  }

  @override
  void dispose() {
    _confettiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: ConfettiWidget(
            confettiController: _confettiController,
            blastDirectionality: BlastDirectionality.explosive,
            blastDirection: -pi / 2,
            emissionFrequency: 0.005,
            numberOfParticles: 100,
            maxBlastForce: 20,
            minBlastForce: 13,
            gravity: 0.03,
          ),
        ),
        widget.alertDialog
      ],
    );
  }
}