바텀시트로 모달창을 만들었는데 모달창을 두개를 만드니까 다음꺼를 눌러도 이전 모달창이 그대로 남아있어서 취소를 할때 배경화면도 두번 눌러야하고 보기에도 안좋아서 어떻게 해야하나 찾아봤는데 생각보다 간단한 방법이였다...
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);를 해주면 전에 모달창이 내려가진다.
생각보다 너무 간단해서 머쓱,,