flutter 모달창 (팝업) 띄우기

 

KB증권의 M-able 와이드 클론 코딩 중 저 팝업! 에 대하여 알아보자 ~~~ 

 

일단 뒤에 메인페이지가 나와있고 그 위에 팝업을 생성해야 하기 때문에 메인페이지에 해당 팝업이 나오게 만들어 준다.

import 'package:flutter/material.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';

import '../../constants/CommonColor.dart';
import '../../dialog/BasePopUpWindow.dart';
import '../../manager/MenuManager.dart';
import 'MainAppBar.dart';
import '../../dialog/MainDialog.dart';
import 'MainDrawer.dart';
import 'MainSideBar.dart';

class MainPage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  /// true 면 24시간 지났음 false 는 24시간 안지났음
  @override
  Widget build(BuildContext context) {
    Future<bool> shouldShowPage = MainDialog().checkShowPage();

    shouldShowPage.then((value) {
      print(value);

      if (value) {
        Future.delayed(Duration.zero, () {
          popWindow(context, "", MainDialog());
        });
      }
    });

    return Scaffold(
      key: _scaffoldKey,
      drawer: MainDrawer(scaffoldKey: _scaffoldKey),
      body: Row(
        children: [
          // 사이드바
          MainSideBar(),
          Expanded(
            child: Column(
              children: [
                // 상단바
                MainAppBar(),
                // 컨텐츠 영역
                Expanded(
                  child: Obx(() {
                    return MenuManager.instance.contents.value;
                  }),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

 

shouldShowPage가 팝업을 보여 줄 것인지 말 것인지를 결정하고 있다.  그리고 저 팝업은 공통속성으로 만들어서 나중에 위젯만 불러와도 되게 변경 해 주었다. 

 

 

 

이 순서대로 진행이 되고 우성 MainDialog의 chechShowPage() 를 불러와 준다. 이 메서드는 '오늘 하루 보지 않기' 를 진행 하기 위해 하루의 시간이 지났는지 확인하는 Boolean 값을 저장 해 놓은 메서드이다.  그 값이 true 를 반환 했다면 popupWindow을 띄운다. 

 

 

 

MainDialog.chechShowPage()

 Future<bool> checkShowPage() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    /// 1. 몇시로 저장 되어 있나 확인
    int? lastHideTime = prefs.getInt('lastHideTime');

    /// 2. 저장 되어 있는 값이 있으면 24시간이 지났나 확인 해봐야 함
    if (lastHideTime != null) {
      DateTime lastTime = DateTime.fromMillisecondsSinceEpoch(lastHideTime);
      DateTime now = DateTime.now();
      return now.difference(lastTime).inMinutes >= 1;
    } else {
      return true;
    }
  }

 

SharedPreferences 라는 내부에 내용을 저장하는 패키지를 사용하여 값을

저장 해 둘 것이다.  그리고 필요할 때 값을 꺼내 확인 하여 하루가 지났는지 아닌지를 돌려 줄 것이다. 

 

 

popupWindow

//팝업창을 띄우는 전역함수
Future<dynamic> popWindow(BuildContext context, String title, Widget content){
  return Get.dialog(
      AlertDialog(
        titlePadding: EdgeInsets.fromLTRB(10, 15, 10, 15),
        backgroundColor: CommonColor.bgDarkMode,
        title: SizedBox(
            width:560,
            height:50,
          child: Stack(
              children: [
                //제목
                Positioned(top:15,left:0, right:0, child: Text(title, textAlign: TextAlign.center, style: TextStyle(color: CommonColor.white, fontWeight: FontWeight.w600),)),
                //닫기 버튼
                Positioned(
                    width: 45,
                    height: 45,
                    right:0,
                    child: TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(); //창 닫기
                      },
                      child: Icon(Icons.close, color: CommonColor.white),
                    )
                )
              ]
          )
        ),
        //화면에 표시될 영역
        content: content,
      ),
      barrierDismissible:false,
  );
}

 

그리고 팝업창을 띄우는 전역함 수인 popWindow를 만들어준다. 파라미터로 내용과 제목 그리고  위젯 함수를 받고 있다. 그래서 아까 popWindow(context, "", MainDialog());  이런 형식으로 파라미터를 전달 해주었다. 

 

MainDialog()

import 'package:flutter/material.dart';
import 'package:sm_mdi/constants/CommonColor.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MainDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(color: CommonColor.bgDarkMode),
        width: 540,
        height: 540,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset(
              "assets/images/popupImg.png",
              width: 450,
              height: 350,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('M-able 와이드 둘러보기',
                        style: TextStyle(color: CommonColor.white)),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: CommonColor.bannerDark_GREY,
                      padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
                    )),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    '이벤트 자세히 보기',
                    style: TextStyle(color: CommonColor.bannerBgDown_DK),
                  ),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: CommonColor.fontYellow,
                    padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
                  ),
                ),
              ],
            ),
            SizedBox(height: 30),
            TextButton(
              style:
                  TextButton.styleFrom(foregroundColor: CommonColor.fontGrey),
              child: const Text('오늘 하루 그만 보기',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                  )),
              onPressed: () {
                hidePage();
                Navigator.of(context).pop();
              },
            ),
          ],
        ));
  }

  void hidePage() async {
    final SharedPreferences pref = await SharedPreferences.getInstance();

    DateTime now = DateTime.now();
    //flutter: 2023-11-17 13:57:25.331969

    //millisecondsSinceEpoch 현재 시각을 ms로 변환하여 Int로 반환.
    pref.setInt('lastHideTime', now.millisecondsSinceEpoch);
  }

  //보여줄껀가 말껀가 확인해야 됌
  Future<bool> checkShowPage() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    /// 1. 몇시로 저장 되어 있나 확인
    int? lastHideTime = prefs.getInt('lastHideTime');

    /// 2. 저장 되어 있는 값이 있으면 24시간이 지났나 확인 해봐야 함
    if (lastHideTime != null) {
      DateTime lastTime = DateTime.fromMillisecondsSinceEpoch(lastHideTime);
      DateTime now = DateTime.now();
      return now.difference(lastTime).inMinutes >= 1;
    } else {
      return true;
    }
  }
}

 

그러면 이제 저런 팝업이 땋~~ 나올 것이다~~