[flutter] BottomSheet 화면에 사진 추가하는 방법

14 Dec 2023

flutter

BottomSheet는 Flutter에서 화면 하단에 나타나는 작은 패널이며, 이를 통해 사용자로 하여금 쉽고 빠르게 작업을 수행할 수 있습니다. 이 포스트에서는 BottomSheet에 이미지를 추가하는 방법에 대해 알아보겠습니다.

1. BottomSheet 생성

우선, BottomSheet를 생성해야 합니다. 아래 예제는 Scaffold 내에서 떠다니는 버튼을 눌렀을 때 BottomSheet를 표시하는 방법을 보여줍니다.

Scaffold(
  appBar: AppBar(
    title: Text('BottomSheet Example'),
  ),
  body: Center(
    child: ElevatedButton(
      child: Text('Show BottomSheet'),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return Container(
              child: Text('BottomSheet Content'),
            );
          },
        );
      },
    ),
  ),
);

위 예제에서 showModalBottomSheet 함수를 사용하여 BottomSheet를 생성합니다.

2. 이미지 추가

이제 BottomSheet에 이미지를 추가해보겠습니다. 이미지를 추가하기 위해서는 Image 위젯을 사용하면 됩니다.

Scaffold(
  appBar: AppBar(
    title: Text('BottomSheet with Image'),
  ),
  body: Center(
    child: ElevatedButton(
      child: Text('Show BottomSheet'),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.photo),
                    title: Text('Add Photo'),
                    onTap: () {
                      // TODO: Handle photo addition
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.photo_library),
                    title: Text('Choose from Gallery'),
                    onTap: () {
                      // TODO: Handle gallery selection
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.clear),
                    title: Text('Cancel'),
                    onTap: () => Navigator.pop(context),
                  ),
                ],
              ),
            );
          },
        );
      },
    ),
  ),
);

위의 코드에서는 ListTile을 사용하여 BottomSheet에 이미지를 추가하는 옵션을 표시합니다. 여기에 사용자가 선택한 옵션에 따라 이미지 처리 로직을 추가하면 됩니다.

이제 당신의 Flutter 애플리케이션에서 BottomSheet에 이미지를 추가하는 방법을 알게 되었습니다. 고객들이 쉽게 이미지를 추가할 수 있도록 도와주시기 바랍니다.

더 많은 BottomSheet 관련 정보를 알고 싶다면, Flutter 공식 문서를 확인해보세요.

위의 내용은 BottomSheet에 이미지를 추가하는 방법에 대한 내용을 담고 있습니다. 추가적인 정보가 필요하다면 더 자세한 내용을 참고할 수 있습니다.