Flutter[플러터] / CupertinoActionSheet 를 사용하여 iOS 스타일로 모달 팝업 만들기 (액션 중 하나 선택, 액션 바텀 시트, 쿠퍼티노, 선택지, 인터페이스) CupertinoActionSheet (Flutter Widget of the Week)

CupertinoActionSheet class

iOS 스타일의 작업 시트입니다.

액션 시트는 사용자에게 현재 상황과 관련된 두 가지 이상의 선택지를 제시하는 특정 스타일의 알림입니다. 액션 시트에는 제목, 추가 메시지, 그리고 액션 목록이 포함될 수 있습니다. 제목은 메시지 위에 표시되고, 액션은 이 콘텐츠 아래에 표시됩니다.

이 작업 시트는 표준 iOS 작업 시트 제목 및 메시지 텍스트 스타일과 일치하도록 제목과 메시지의 스타일을 지정합니다.

표준 iOS 작업 시트 버튼처럼 보이는 작업 버튼을 표시하려면 이 작업 시트에 지정된 작업 에 대해 CupertinoActionSheetAction 을 제공하세요.

다른 버튼과 별도로 iOS 스타일 취소 버튼을 포함하려면 이 작업 시트에 지정된 cancelButton 에 대한 CupertinoActionSheetAction 을 제공하세요.

액션 시트는 일반적으로 showCupertinoModalPopup 에 자식 위젯으로 전달되며 , 이 위젯은 화면 하단에서 위로 밀어 액션 시트를 표시합니다.

https://youtu.be/U-ao8p4A82k

공식 문서 코드

 

---

앱에서 모달 팝업을 사용하는 것은 흔한 일이다. 그것이 안드로이드가 되었든 iOS 가 되었든 간에 말이다. 당연한 것이지만 각 OS 마다 스타일이 다르다. 안드로이드는 머테리얼 디자인을 iOS 는 쿠퍼티노 디자인을 따르게 된다. 여기서 쿠퍼티노 디자인의 바텀시트는 어떻게 제작해야 할까? 바로 CupertinoActionSheet 위젯을 사용하면 된다.

이 CupertinoActionSheet 는 iOS 스타일의 바텀 시트로 사용자에게 여러 가지 액션 중 하나를 선택하도록 하는 인터페이스를 제공한다. iOS 앱에서 흔히 볼 수 있는 Action Sheet 를 구현할 때 사용하는 위제이 되겠다. showCupertinoModalPopup 함수와 함께 일반적으로 사용한다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
title	Widget?	null	시트의 제목으로 일반적으로 Text 위젯을 사용
message	Widget?	null	제목 아래에 표시되는 설명 메시지
actions	List<Widget>?	null	사용자가 선택할 수 있는 액션 목록
messageScrollController	ScrollController?	null	메시지 영역의 스크롤을 제어하는 컨트롤러
actionScrollController	ScrollController?	null	액션 목록의 스크롤을 제어하는 컨트롤러
cancelButton	Widget?	null	기타 액션과 구분되어 표시되는 취소 버튼

 

일단 CupertinoActionSheet 위젯을 사용하기 위해선 actions 속성 안에 CupertinoActionSheetAction 위젯이 반드시 1개 이상 존재해야 한다.

showCupertinoModalPopup(context: context, builder: (context) {
  return CupertinoActionSheet();
},);

기본적인 사용 위치는 showCupertinoModalPopup 함수 안에서 해준다.

이제 안에 액션을 배치하기 위해선 CupertinoActionSheetAction 을 사용해야 한다.

CupertinoActionSheet(
  actions: [
    CupertinoActionSheetAction( // 무조건 1개 이상 존재 해야 함!
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Item'),
    ),
  ],
)

하위 속성인 actions 안에 CupertinoActionSheetAction 위젯을 배치하고 싶은 만큼 배치해 주면 된다.

이 위젯은 필수 파라미터로 onPressed 와 child 를 갖고 있는데 위 코드에서는 그냥 pop 동작과 텍스트를 넣어줬다.

이러면 사실 끝이다.

사진과 같이 잘 만들어진 모습을 볼 수 있는데 지금 이거 자체로써는 많이 부족하다는 것을 느낄 것이다. 그렇다. 제목과 내용이 없다.

CupertinoActionSheet(
  title: Text('타이틀'),
  message: Text('메시지'),
  actions: [
    CupertinoActionSheetAction(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('겁나 쉬움'),
    ),
  ],
)

하위 속성인 title 과 message 로 간단하게 제목과 내용을 만들어 줄 수 있다.

이제 여기서 기존의 actions 로 배치된 것 과는 차별되어 동떨어져 있는 cancel 버튼을 만들어 줄 수도 있는데 이것도 하위 속성인 cancelButton 을 사용해주면 된다. 이거는 하위속성으로 구분만 되어있지 actions 안에 만든 것과 완전히 동일하게 CupertinoActionSheetAction 을 사용하여 만들어주게 된다.

CupertinoActionSheet(
  title: Text('타이틀'),
  message: Text('메시지'),
  actions: [
    CupertinoActionSheetAction(
      onPressed: () => Navigator.of(context).pop(),
      child: Text('Item'),
    ),
  ],
  cancelButton: CupertinoActionSheetAction(
    isDestructiveAction: true, // 글씨 빨갛게 만들어줌
    onPressed: () => Navigator.of(context).pop(),
    child: Text('isDestructiveAction 활성화'),
  ),
)

이렇게 상향식 슬라이드의 동작 리스트가 iOS 방식으로 완성되게 된다. 여기서 조금 띠꺼운(?)은 점은 iOS 형식의 다이얼로그 위젯들은 대부분 배경을 클릭했을 때 pop 동작을 지원하지 않기 때문에 showCupertinoDialog 함수 안에서 barrierDismissible 를 ture 로 설정하여 켜야 한다.

showCupertinoDialog(
  barrierDismissible: true, // 기본값 false
  context: context,
  builder: (context) {

 

암튼 이렇게 CupertinoActionSheet 위젯에 대해서 알아보았다. 쿠퍼티노 스타일의 위젯은 뭔가 마테리얼 디자인과 많이 다를 것 같지만 항상 사용해 보면 오히려 더 쉽게 구성되어 있는 경우가 많은 것 같다. 암튼 도움이 되었길 바라며 마치겠다.