[Flutter] Widgets(4) - 재사용 가능한 팝업창 만들기

일반적인 경고창을 만들고 필요한 화면에서 호출가능하고, 재사용 가능하다.

팝업창의 입력값에 따라 다른 처리도 가능하다.

 

class WarningYesNo extends StatelessWidget {
  final title;
  final msg;
  final YesMsg;
  final NoMsg;
  WarningYesNo({required this.title, required this.msg, required this.YesMsg, required this.NoMsg});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(title,
        textAlign: TextAlign.center,
      ),
      content: Text(msg,
      ),
      actions: <Widget>[
        Container(
          decoration: BoxDecoration(),
          child: MaterialButton(
            onPressed: () {
              print('WarningYesNo >> false');
              Get.back(result: false);
            },
            child: Text(NoMsg),
          ),
        ),
        Container(
          decoration: BoxDecoration(),
          child: MaterialButton(
            onPressed: () {
              print('WarningYesNo >> true');
              Get.back(result: true);
            },
            child: Text(YesMsg),
          ),
        ),
      ],
    );
  }
}

 

실제 코드에서 호출하는 예시

- 데이터 삭제시 OK버튼을 누른경우만 데이터를 삭제하는 샘플

 

//delete
  deleteChapter() async {
    var _msg;

      try {
        var delete = await deleteLoanWarning(
          context,
          _multiMsg.strWarnMessage,
          _multiMsg.strWarnDelete,
        );
        -- OK버튼을 누르면 데이터 삭제
        if (delete.toString() == 'true') {
          await deleteData(widget.chapterInfo['id']); // IbJB3jwVBR7WRsPXqAG9
        }
      } catch (error) {
        print('error clearing notifications' + error.toString());
      }
  }

  Future<bool> deleteLoanWarning(BuildContext context, String title, String msg) async {
    return await showDialog<bool>(
      context: context,
      builder: (context) => WarningYesNo(title: title, msg: msg, YesMsg: _multiMsg.strYes, NoMsg: _multiMsg.strNo,),
    ) ?? false;
  }

 

팝업창 화면