[flutter] BottomSheet와 함께 사용하는 메뉴 생성하기

14 Dec 2023

flutter

Flutter에서 BottomSheet를 사용하면 사용자에게 선택할 수 있는 간단한 옵션을 제공할 수 있습니다. BottomSheet를 함께 사용하여 메뉴를 만드는 방법을 알아보겠습니다.

BottomSheet 및 메뉴 생성하기

먼저, BottomSheet와 함께 사용할 메뉴를 생성하는 방법에 대해 알아봅시다.

1. BottomSheet 생성

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        child: Wrap(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.music_note),
              title: Text('Music'),
              onTap: () {
                // 선택한 메뉴에 대한 동작 구현
              },
            ),
            ListTile(
              leading: Icon(Icons.photo),
              title: Text('Photo'),
              onTap: () {
                // 선택한 메뉴에 대한 동작 구현
              },
            ),
          ],
        ),
      );
    },
  );
}

2. BottomSheet 호출

메뉴 생성이 완료되면 BottomSheet를 호출할 수 있습니다.

void _openMenu(BuildContext context) {
  _showBottomSheet(context);
}

메뉴를 호출할 때에는 _openMenu() 함수를 사용하여 BottomSheet를 표시합니다.

결론

BottomSheet를 사용하면 간편하게 사용자에게 옵션을 제공할 수 있습니다. 메뉴를 함께 생성하여 보다 효과적으로 사용자와 상호작용할 수 있습니다.

이제 당신도 Flutter에서 BottomSheet와 함께 사용하는 메뉴를 생성하는 방법을 숙지하였습니다. 개발하시는 데 도움이 되길 바랍니다!