[ Flutter ] showModalBottomSheet 화면 하단 팝업

화면 하단 팝업을 구현하기 위해

showModalBottomSheet 기능을 사용

 

SizeBox 위젯을 따로 만들어 추가 버튼 쪽을 따로 구현

SizedBox AddChildList() {
    return SizedBox(
        width: double.infinity,
        child: GestureDetector(
          onTap: () {
            showModalBottomSheet(
                context: context, builder: (context) => BottomModal());
          },
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 12.0),
            decoration: buttonDecoration(),
            child: Center(
                child: Text(
              '+',
              style: TextStyle(color: textColor),
            )),
          ),
        ));
  }

 

showModalBottomSheet는 GestureDetector를 이용

GestureDector는 onTap() 을 활용하여 이벤트를 발생한다.

이후 child는 버튼 모양을 구현

반응형

버튼 모달창은 따로 컴포넌트를 만들어서 이후 다른 페이지에서도 사용할 수 있도록 구성

import 'package:flutter/material.dart';
import 'package:sumgo/config/colors.dart';

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

  @override
  State<BottomModal> createState() => _BottomModalState();
}

class _BottomModalState extends State<BottomModal> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 200,
      decoration: BoxDecoration(
        color: boxColor,
      ),
      child: Center(
          child: Text(
        '팝업!!',
        style: TextStyle(color: textColor),
      )),
    );
  }
}

 

decoration은 따로 위젯을 만들어서 적용

BoxDecoration buttonDecoration() {
  return BoxDecoration(
      color: buttonColor, borderRadius: BorderRadius.all(Radius.circular(8.0)));
}

전에 만들었던 ExpansionTile에서 버튼을 누르면 리스트를 추가하고자 ExpansionTile 안에 추가 버튼을 구성하여

버튼을 누르면 하단 팝업이 나와 이벤트를 추가 시키고자 한다.