[flutter] BottomSheet 팝업 창 생성 방법

14 Dec 2023

flutter

BottomSheet는 사용자에게 정보를 제공하거나 추가 작업을 수행할 수 있는 간단한 팝업 창을 제공하는데 사용됩니다. Flutter에서 BottomSheet를 생성하는 방법을 알아보겠습니다.

BottomSheet 생성하기

BottomSheet를 생성하는 첫 번째 단계는 Scaffold 위에 BottomSheet를 추가하는 것입니다. 다음과 같이 Scaffold 위에 Floating action button을 추가하고, onPressed 이벤트 핸들러 내에서 showBottomSheet() 메서드를 사용하여 BottomSheet를 생성할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomSheet Example'),
        ),
        body: Center(
          child: Text('Click the button to show BottomSheet'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200,
                  color: Colors.amber,
                  child: Center(
                    child: Text('This is a BottomSheet'),
                  ),
                );
              },
            );
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 코드에서 showModalBottomSheet() 메서드를 사용하여 BottomSheet를 생성하고 컨텐츠를 정의할 수 있습니다.

BottomSheet 커스터마이징하기

생성된 BottomSheet의 외관을 변경하고 커스터마이즈하려면 builder 속성에서 스타일과 컨텐츠를 지정할 수 있습니다. 추가적으로 다양한 위젯을 사용하여 BottomSheet의 모양과 동작을 조정할 수 있습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 300,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.0),
          topRight: Radius.circular(16.0),
        ),
      ),
      child: Center(
        child: Text('Customized BottomSheet'),
      ),
    );
  },
);

위의 코드에서는 Container 위젯을 사용하여 BottomSheet의 외관을 변경했습니다.

이제 Flutter 앱에서 BottomSheet를 손쉽게 추가하고 커스터마이즈할 수 있는 방법을 배웠습니다. BottomSheet를 효율적으로 활용하여 사용자와의 상호작용을 개선하는 데 도움이 될 것입니다.

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