[flutter] BottomSheet에서 앱에 있는 데이터 표시하기

14 Dec 2023

flutter

BottomSheet는 앱 화면의 하단에서 모달 형태로 표시되는 위젯으로, 다양한 기능을 제공하며 사용자 경험을 향상시킬 수 있습니다. BottomSheet 안에 앱에 있는 데이터를 표시하는 방법에 대해 알아보겠습니다.

1. 기본 BottomSheet 구현하기

먼저, 기본 BottomSheet를 구현합니다. 아래의 코드는 Scaffold 위젯 안에서 floatingActionButton을 눌렀을 때 BottomSheet가 표시되도록 하는 예제입니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Text('BottomSheet Content'),
        );
      },
    );
  },
  child: Icon(Icons.add),
),

2. 데이터를 표시하는 BottomSheet 구현하기

앱에 있는 데이터를 BottomSheet 안에 표시하려면, BottomSheet의 builder에서 데이터를 표시하는 위젯을 반환하면 됩니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          padding: EdgeInsets.all(16.0),
          child: ListView(
            children: [
              ListTile(
                title: Text('Data 1'),
              ),
              ListTile(
                title: Text('Data 2'),
              ),
              ListTile(
                title: Text('Data 3'),
              ),
            ],
          ),
        );
      },
    );
  },
  child: Icon(Icons.add),
),

위의 예제에서는 ListView 위젯을 사용하여 BottomSheet 안에 데이터를 목록 형태로 표시하고 있습니다.

이제, 위의 코드를 통해 BottomSheet 안에 앱에 있는 데이터를 표시하는 방법에 대해 알아보았습니다.

참고 자료:

Flutter Documentation: https://flutter.dev/docs
Flutter Widget Catalog: https://flutter.dev/docs/development/ui/widgets