[flutter] BottomSheet 연동하는 다른 위젯들

14 Dec 2023

flutter

BottomSheet는 flutter 앱에서 모달 형태의 하단 시트를 구현하는 데 사용됩니다. BottomSheet와 다른 위젯들을 연동하려면 몇 가지 방법이 있습니다.

1. RaisedButton과 함께 BottomSheet 사용하기

RaisedButton을 누르면 BottomSheet가 화면 하단에서 나타나도록 구현할 수 있습니다.

RaisedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Text('이것은 BottomSheet입니다.'),
        );
      },
    );
  },
  child: Text('BottomSheet 열기'),
)

2. ListView의 ListTile과 함께 BottomSheet 사용하기

ListView 내에 ListTile을 추가하고 ListTile을 누르면 BottomSheet가 나타나도록 할 수 있습니다.

ListView(
  children: <Widget>[
    ListTile(
      title: Text('항목 1'),
      onTap: () {
        showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return Container(
              child: Text('항목 1을 선택했습니다.'),
            );
          },
        );
      },
    ),
    ListTile(
      title: Text('항목 2'),
      onTap: () {
        showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
            return Container(
              child: Text('항목 2를 선택했습니다.'),
            );
          },
        );
      },
    ),
  ],
)

3. FloatingActionButton과 함께 BottomSheet 사용하기

FloatingActionButton을 누르면 BottomSheet를 나타나도록 할 수 있습니다.

FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Text('이것은 BottomSheet입니다.'),
        );
      },
    );
  },
  child: Icon(Icons.add),
)

flutter 앱에서 BottomSheet를 다른 위젯들과 함께 사용하는 방법에 대한 간단한 예제 코드를 제공했습니다. BottomSheet는 다양한 위젯들과 함께 유연하게 사용할 수 있으며, 앱의 사용자 경험을 향상시키는 데 유용합니다.

위 예제는 flutter 공식 문서와 flutter의 예제 코드를 참고하여 작성되었습니다.

이 문서는 flutter를 사용하여 작성되었습니다.