[flutter] 플러터 BottomSheet 위젯 예제 코드

14 Dec 2023

flutter

우선, Scaffold 위젯의 body 속성 안에 아래 코드를 추가합니다.

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 200,
          color: Colors.white,
          child: Center(
            child: Text('BottomSheet Example'),
          ),
        );
      },
    );
  },
  child: Text('Show BottomSheet'),
)

이 코드는 ElevatedButton을 누르면 showModalBottomSheet를 통해 BottomSheet를 표시하는 예제입니다. showModalBottomSheet 메서드는 context와 builder 속성을 필요로 합니다. builder 함수에서는 표시할 BottomSheet의 내용을 정의합니다.

참고문헌: https://api.flutter.dev/flutter/material/showModalBottomSheet.html