[ FLUTTER 커스텀 ] Popup

* popup.dart

class Popup {
  static Widget success(String title, String text) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        ClipRRect(
          borderRadius: RadiusConfig.shallow,
          child: SizedBox(
            width: 300,
            height: 270,
            child: Scaffold(
              resizeToAvoidBottomInset: false,
              body: SizedBox(
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    AnimatedCheckIcon(),
                    SizedBox(height: 20),
                    Text.rich(
                      TextSpan(
                        text: '$title\n',
                        style: TextStyle(
                          fontSize: FontConfig.small,
                          fontWeight: NotoSansKR.kBold,
                          color: ColorConfig.darkGrey,
                        ),
                        children: <TextSpan>[
                          TextSpan(
                            text: text,
                            style: TextStyle(
                              fontSize: FontConfig.smallest,
                              fontWeight: NotoSansKR.kRegular,
                            ),
                          ),
                        ],
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
              bottomNavigationBar: Padding(
                padding: const EdgeInsets.all(InnerConfig.smallest),
                child: TextButton(
                  onPressed: () {
                    Get.back();
                  },
                  style: TextButton.styleFrom(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(3)),
                    backgroundColor: ColorConfig.main,
                  ),
                  child: Container(
                      alignment: Alignment.center,
                      height: 50,
                      child: Text('확인',
                          style: TextStyle(
                              fontSize: FontConfig.smallest,
                              color: ColorConfig.white))),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  static Widget endOfApp() {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        ClipRRect(
          borderRadius: RadiusConfig.shallow,
          child: SizedBox(
            width: 300,
            height: 270,
            child: Scaffold(
              resizeToAvoidBottomInset: false,
              appBar:
                  AppBar(automaticallyImplyLeading: false, title: Text('종료')),
              body: SizedBox(
                width: double.infinity,
                child: Center(
                  child: Text(
                    '정말로 앱을 종료하시겠습니까?',
                    style: TextStyle(
                      fontSize: FontConfig.smallest,
                      fontWeight: NotoSansKR.kRegular,
                    ),
                  ),
                ),
              ),
              bottomNavigationBar: Padding(
                padding: const EdgeInsets.all(InnerConfig.smallest),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    OutlinedButton(
                      onPressed: () => Get.back(),
                      child: Text('닫기'),
                    ),
                    SizedBox(width: 10),
                    OutlinedButton(
                      onPressed: () {
                        SystemNavigator.pop();
                      },
                      child: Text('종료'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

// 체크모양 애니메이션 아이콘
class AnimatedCheckIcon extends StatefulWidget {
  const AnimatedCheckIcon({
    Key? key,
  }) : super(key: key);

  @override
  _AnimatedCheckIconState createState() => _AnimatedCheckIconState();
}

class _AnimatedCheckIconState extends State<AnimatedCheckIcon> {
  double _maxX = 60 - 36 - 14;
  double _myX = 0.0;
  bool _loop = true;
  double _speedX = 0.6;

  Future checkAnimation() async {
    while (_loop) {
      await Future.delayed(Duration(milliseconds: 20), () {
        setState(() {
          if (_myX < _maxX) {
            _myX += (_speedX *= 1.2);
          } else {
            _loop = false;
            return;
          }
          // print(_myX);
        });
      });
    }
  }

  @override
  void initState() {
    _loop = true;
    checkAnimation();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Stack(
        children: <Widget>[
          AnimatedOpacity(
            opacity: _myX > 0 ? 1 : 0,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeOut,
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(60),
                border: Border.all(width: 2, color: ColorConfig.main),
              ),
            ),
          ),
          AnimatedOpacity(
            opacity: _myX > 0 ? 1 : 0,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeOut,
            child: Transform.translate(
                offset: Offset(_myX, 10),
                child: Icon(Icons.check, size: 36, color: ColorConfig.main)),
          ),
        ],
      ),
    );
  }
}