★★★★★
#UI·디자인 · claude-code
Bottom Sheet 패턴 — 추가 옵션 메뉴
하단에서 올라오는 Bottom Sheet (옵션 메뉴).
#bottom-sheet#modal#menu
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
하단에서 올라오는 Bottom Sheet (옵션 메뉴).
구현:
```dart
void _showBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Icon(Icons.edit),
title: Text('수정'),
onTap: () {
Navigator.pop(context);
// 수정 로직
},
),
ListTile(
leading: Icon(Icons.delete),
title: Text('삭제'),
onTap: () {
Navigator.pop(context);
// 삭제 로직
},
),
ListTile(
leading: Icon(Icons.close),
title: Text('취소'),
onTap: () => Navigator.pop(context),
),
],
);
},
);
}
```
커스텀 스타일:
```dart
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (context) => ...,
)
```
{{ACTION_LIST}} 목록에 맞춰 구성해줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.