Flutter에서 BottomSheet를 사용하여 하단에서 화면을 전환하는 방법을 알아보겠습니다.

1. BottomSheet 사용하기

먼저, Scaffold 내부에서 BottomSheet를 사용할 수 있습니다. 아래 예제는 FloatingActionButton을 눌렀을 때 BottomSheet가 나타나도록 구현한 코드입니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Text('하단에서 나타나는 화면'),
        );
      },
    );
  },
  child: Icon(Icons.add),
),

2. BottomSheet에 위젯 추가하기

BottomSheet에는 여러 위젯을 추가하여 화면을 구성할 수 있습니다. 예를 들어, ListView나 Column을 사용하여 다른 위젯들을 배치할 수 있습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.photo),
            title: Text('사진 추가'),
            onTap: () {
              // 사진 추가 기능 구현
            },
          ),
          ListTile(
            leading: Icon(Icons.music_note),
            title: Text('음악 추가'),
            onTap: () {
              // 음악 추가 기능 구현
            },
          ),
          // 추가적인 메뉴 항목들
        ],
      ),
    );
  },
);

3. BottomSheet 화면 전환

BottomSheet가 나타난 후 사용자가 특정 항목을 선택할 경우, 해당 항목에 맞는 화면으로 전환할 수 있습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('항목 1'),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => Screen1()));
            }
          ),
          ListTile(
            title: Text('항목 2'),
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => Screen2()));
            }
          ),
        ],
      ),
    );
  },
);

4. 결론

Flutter에서 BottomSheet를 사용하여 하단에서 화면을 전환하는 방법에 대해 알아보았습니다. BottomSheet를 활용하여 사용자에게 더 나은 경험을 제공할 수 있도록 화면을 구성해보세요!

더 자세한 내용은 Flutter 공식 문서를 참고해보세요.