[플러터]Flutter / showModalBottomSheet 위젯 만들기 (위로 올라오는 팝업창 만들기)

오늘은 간단하게 위로 올라오는 로직을 하나 만들어 볼 것이다.

컨테이너에 애니메이션을 넣어서 만드는 것이 아닌 플러터에서 제공해 주는 위젯을 사용해서 만들어 볼 것이다.

예시

 

그럼 일단 먼저 위로 올라오는 로직을 만들기 위해서는 showModalBottomSheet 위젯을 알아야 할 것이다.

showModalBottomSheet 위젯이란?

showModalBottomSheet 위젯은 흔히들 말하는 팝업창의 한 종류로써 플러터가 제공해주고 있는 위젯이다.

하위 속성이 엄청 많지만 오늘은 필수 2개와 그냥 하위 속성 하나만알아보자.

 

필수 하위 속성: context, builder

 

하위 속성(1개만): backgroundColor

 

하나씩 알아보도록 하자.

 

필수 속성:

context

 

context 는 위젯트리 내에서 특정 위치를 나타내는 필수 객체로 이 위젯이 이 화면에 표시될것이라고 지정한다.그냥 showModalBottomSheet 을 쓰면 자동으로 context가 붙어서 완성이 되어 있을 것이다.

builder

 

builder 는 이 showModalBottomSheet안에 표시할 위젯을 정의하는 필수 함수로 쉽게 말해 builder을 사용해야 이 팝업에 위젯들을 채워넣고 꾸밀 수 있다는 말이다. 

 

기본 속성:

backgoundColor

 

backgroundColor는 말 그대로 showModalBottomSheet안의 팝업의 색깔을 지정 할 수 있게 해준다. 그러나 child로 값으로 컨테이너를 가지고 그 안에 색이 있다면 후순위로 밀려난다. 이는 좀 더 밑에서 서술하겠다.

 

 

더 알아보고 싶다고 한다면 알아서 찾아보길 바란다.

 

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

showModalBottomSheet function - material library - Dart API

암튼 이제 사용해 보자.

 

전체 코드

import 'package:flutter/material.dart';

class ShowModalBottomSheetWidget  extends StatelessWidget {
  const ShowModalBottomSheetWidget ({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            showModalBottomSheet(
              backgroundColor: Colors.transparent,
                context: context,
                builder: (context) {
                  return Container(
                    height: 500,
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.9),
                      borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
                    ),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                          child: Row(
                            children: [
                              Text('showModalBottomSheet',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18
                                ),
                              ),
                              Spacer(),
                              GestureDetector(
                                onTap: () {
                                  Navigator.of(context).pop();
                                },
                                child: Icon(Icons.close),
                              )
                            ],
                          ),
                        ),
                        SizedBox(height: 15,),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 40),
                          child: Image.asset('assets/sample.jpg'),
                        ),
                      ],
                    ),
                  );
                },
            );
          },
          child: Image.asset('assets/the_rock.png', width: 250,),
        ),
      )
    );
  }
}

 

이 코드에서 우리가 봐야 할것은 GestureDetector와 showModalBottomSheet, return Container, pop정도가 되겠다.

하나씩 살펴보자.

child: GestureDetector(
  onTap: () {

 

가장 상단의 Center의 child 값에 위치하고 있는 GestureDetector는 이 코드에서 가장 아래에 있는 저 이미지를 클릭하면 그것을 감지하고 showModalBottomSheet를 호출하는 역할을 해주고 있다.

당연하게도 child로는 onTap 바깥에 있는 Image.asset를 가지고 있다.

 

showModalBottomSheet(
  backgroundColor: Colors.transparent,
    context: context,
    builder: (context) {

 

그다음은 showModalBottomSheet 위젯이다. 

이 위젯에 내가 넣은 값을 살펴보면 context 필수 값에는 context로 지정해줬고 builder 필수값에도 괄호를 열고 context를 인자값으로 전달해 준후 중괄호를 열었다.

그럼 저 backgroundColor 에 transparent는 무슨 색이냐? 바로 투명색이다.

그렇다면 이 showModalBottomSheet 위젯의 배경이 투명이냐? 그것은 아니다. 왜냐? 그것은 아래 코드를 보면 알 수 있다.

 

return Container(
  height: 500,
  decoration: BoxDecoration(
    color: Colors.white.withOpacity(0.9),
    borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
  ),

 

builder 안에는 위젯을 만들어야 하기에 Container를 리턴해줬다.

길이는 500만큼을 height 크기로 줬다.

그런데 여기서 눈치빠른 사람은 눈치를 챘을 것이다.바로 이 Container가 showModalBottomSheet의 모습을 구성하고 있다는 것을.

그렇다면 어차피 여기서 color를 지정해줄 수 있는데 아까 위에서 왜 backgroundColor를 투명색으로 지정해줬느냐? 이러면 포개어져있는 이 Container의 색깔이 뒤에 있는 backgroundColor의 영향을 받기때문이다.

 

이게 무슨 말이냐? color 값을 그냥 red로 한다고 해보자.

그럼 보이는 것 처럼 뒤가 비치지 않는다. 

 

하지만 withOpacity 로 투명도를 올린다면? (0.7정도 줘봤다.)

 

이렇게 뒤가 비치는 showModalBottomSheet 위젯이 되는 것이다.

그렇게 색깔을 지정하고 양옆의 모서리를 둥글게 하고 싶으면 마찬가지로 Boxdecoration 안에 있는 값이 borderRadius를 사용해서 둥글게 만들어 주면 되는것이다.

 

그다음은 Navigator.of(context).pop();이다.

GestureDetector(
  onTap: () {
    Navigator.of(context).pop();
  },
  child: Icon(Icons.close),
)

 

이 코드가 위치해 있는 곳을 보면 알겠지만 return Container의 child 값으로 위젯들을 배치하기 위해 Column 을 사용했는데 그 안에 있는 코드이다. 그니까 내가 배치하고 싶어서 배치한 위젯이라는 거다.

그럼 이 코드에서 무엇을 알 수 있냐? 이 showModalBottomSheet 위젯이 Navigator.of(context).pop(); 으로 닫힌다는 것이다. 맨 처음 GIF를 보면 알겠지만 아이콘을 누르니까 팝업창이 닫힌다. 그걸 위해서 이런 아이콘을 배치한 것이다.

 

이렇게 위에다가 필수 코드를 다 작성을 했다면 안에다가 마음대로 위젯을 배치해주면 된다.

 

오늘은 showModalBottomSheet 위젯이 대해서 간단하게 알아봤다. 도움이 되었길 바라며 포스팅 마치겠다.