[flutter] BottomSheet에 이미지 추가하는 방법

14 Dec 2023

flutter

이번에는 Flutter 애플리케이션의 BottomSheet에 이미지를 추가하는 방법에 대해 살펴보겠습니다.

1. BottomSheet 위에 이미지 추가하기

BottomSheet에 이미지를 추가하려면 먼저 showModalBottomSheet를 사용하여 BottomSheet를 띄운 후, 해당 BottomSheet의 child로 이미지 위젯을 추가합니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.asset('assets/image.jpg'), // 이미지 추가
          // 다른 위젯들 추가
        ],
      ),
    );
  },
);

위 코드에서 Image.asset을 통해 이미지를 추가할 수 있습니다. assets 폴더에 이미지를 추가하고 해당 이미지의 경로를 지정해주어야 합니다.

# pubspec.yaml 파일
flutter:
  assets:
    - assets/image.jpg

2. BottomSheet 스타일링

BottomSheet에 이미지를 추가한 후, 필요에 따라 이미지의 스타일을 조정할 수 있습니다. 예를 들어, 이미지의 크기나 패딩을 조절하여 더 나은 사용자 경험을 제공할 수 있습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0), // 패딩 추가
      child: Column(
        children: <Widget>[
          Image.asset(
            'assets/image.jpg',
            height: 200, // 이미지 높이 조절
            width: 200, // 이미지 너비 조절
          ),
          // 다른 위젯들 추가
        ],
      ),
    );
  },
);

3. 마무리

이제 BottomSheet에 이미지를 추가하는 방법에 대해 알아보았습니다. 이미지를 보다 쉽게 탐색하고 사용할 수 있도록 BottomSheet에 이미지를 추가하여 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

이상입니다! Flutter의 BottomSheet에 이미지를 추가하는 방법을 살펴보았습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.