[Flutter] 모달창

wjdguseya_0880·2024년 6월 23일
0

바텀시트로 모달창을 만들었는데 모달창을 두개를 만드니까 다음꺼를 눌러도 이전 모달창이 그대로 남아있어서 취소를 할때 배경화면도 두번 눌러야하고 보기에도 안좋아서 어떻게 해야하나 찾아봤는데 생각보다 간단한 방법이였다...

void _modalshow(BuildContext context) {
    Navigator.pop(context);
    showModalBottomSheet(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        backgroundColor: Colors.transparent,
        barrierColor: Color(0x66303030).withOpacity(0.4),
        context: context,
        builder: (context) {
          return Stack(children: [
            Container(
              width: 360,
              height: 160,
              margin: EdgeInsets.all(1),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.8),
                border: GradientBoxBorder(
                  width: 1,
                  gradient: LinearGradient(
                    colors: [
                      Colors.white.withOpacity(0.5),
                      Colors.white.withOpacity(0.2)
                    ],
                  ),
                ),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            BlurryContainer(
              width: double.infinity,
              height: 160.h,
              blur: 12,
              elevation: 0,
              borderRadius: BorderRadius.circular(10),
              child: Container(),
            ),
            Opacity(
              opacity: 0.8,
              child: Container(
                margin: EdgeInsets.all(1),
                width: 360.w,
                height: 160.h,
                decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Color(0x26000000),
                        blurRadius: 8,
                        offset: Offset(-2, -2),
                        spreadRadius: 0,
                      )
                    ],
                    color: Colors.white.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(10)),
              ),
            ),
            Positioned(
                left: 16,
                top: 16,
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _modalshow(context);
                    });
                  },
                  child: Container(
                    width: 156,
                    height: 128,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/image_asset/mypage/profile_select (2).png',
                        ),
                        SizedBox(
                          height: 8,
                        ),
                        Text(
                          '남성',
                          style: Black(16, FontWeight.w600),
                        )
                      ],
                    ),
                  ),
                )),
            Positioned(
                right: 16,
                top: 16,
                child: GestureDetector(
                  onTap: () => _pickImage(ImageSource.gallery),
                  child: Container(
                    width: 156,
                    height: 128,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/image_asset/mypage/profile_select (1).png',
                          width: 28,
                          height: 42,
                        ),
                        SizedBox(
                          height: 8,
                        ),
                        Text(
                          '여성',
                          style: Black(16, FontWeight.w600),
                        )
                      ],
                    ),
                  ),
                )),
          ]);
        });
  }

다음으로 뜨는 모달창에 Navigator.pop(context);를 해주면 전에 모달창이 내려가진다.
생각보다 너무 간단해서 머쓱,,

profile
플러터 공부 기록일지

0개의 댓글