[flutter/dart] 밑에서 올라오는 팝업창 만들기

1.팝업창을 띄울때 사용할 버튼 만들기

Center(
    child: IconButton(
        onPressed: () {},
        icon: Icon(Icons.add_circle, size: 40,)
    )
),

​

2. 팝업창 함수 만들기

​

기존에 작성하던 클래스 밖에 함수를 하나 만들어 주어야 합니다.

void addDialog(context) {

  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container();
    },
  );
}

showModalBottomSheet을 사용하면 우리가 원하는 밑에서 올라오는 팝업창을 이용할 수 있습니다.

​

​

실행화면

이렇게 화면의 반까지 팝업창이 올라오게 됩니다.

​

3. 팝업창 꾸미기

팝업창 상단을 둥글게 만들어 주기 위해서 평소에 사용하던 decoration으로 container를 꾸며주시면 됩니다.

decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
    topLeft: Radius.circular(30),
    topRight: Radius.circular(30),
    ),
),

하지만? 둥글어지지 않습니다..

​

왜냐하면 저는 팝업 컨테이너 위에 child로 컨테이너를 하나 더 만들어 주었는데요.

​

해결 방법을 찾아서 팝업창을 바로 둥글게하는 명령어도 써봤지만 전혀 둥글어지지 않아서

위에 컨테이너를 하나 더 올려서 가장 바깥에 있는 팝업창 컨테이너 색을 배경색과 같게 만들어 주었습니다.

color: Color(0xFF737373),

이렇게 해주면!!

동글동글해집니다ㅎㅎ

전체코드

import 'package:flutter/material.dart';

class third extends StatefulWidget {
  const third({super.key});

  @override
  State<third> createState() => _thirdState();
}

class _thirdState extends State<third> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: IconButton(
              onPressed: () {
                addDialog(context);
              },
              icon: Icon(
                Icons.add_circle,
                size: 40,
              ))),
    );
  }
}

void addDialog(context) {
  final sizeY = MediaQuery.of(context).size.height;

  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        color: Color(0xFF737373),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),
          ),
        ),
      );
    },
  );
}