[flutter] BottomSheet에서 동적으로 데이터 변경하기

14 Dec 2023

flutter

Flutter에서 BottomSheet는 유용한 위젯으로 사용자 경험을 향상시키는 데 도움이 됩니다. BottomSheet를 사용하여 동적으로 데이터를 변경하는 방법에 대해 알아보겠습니다.

1. BottomSheet 기본 구현

먼저, 기본적인 BottomSheet를 만들어 보겠습니다. 아래 코드는 Scaffold 안에 FloatingActionButton을 누르면 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: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        ListTile(
                          leading: Icon(Icons.ac_unit),
                          title: Text('Option 1'),
                          onTap: () { /* 처리 코드 작성 */ },
                        ),
                        ListTile(
                          leading: Icon(Icons.access_alarm),
                          title: Text('Option 2'),
                          onTap: () { /* 처리 코드 작성 */ },
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            child: Text('Show BottomSheet'),
          ),
        ),
      ),
    );
  }
}

2. 데이터 동적으로 변경하기

BottomSheet에 동적으로 데이터를 변경하려면 상태 관리가 필요합니다. StatefulWidget을 사용하여 데이터를 업데이트하고 BottomSheet를 다시 그리는 방법을 보여드리겠습니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> options = ['Option 1', 'Option 2'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic BottomSheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    child: ListView.builder(
                      itemCount: options.length,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text(options[index]),
                          onTap: () {
                            // 데이터 업데이트
                            setState(() {
                              options[index] = 'Option ${index + 1} Selected';
                            });
                            Navigator.pop(context);
                          },
                        );
                      },
                    ),
                  );
                },
              );
            },
            child: Text('Show Dynamic BottomSheet'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 options 리스트의 항목을 누를 때마다 해당 항목을 업데이트하고 BottomSheet를 닫습니다.

이제 BottomSheet에서 데이터를 동적으로 변경하는 방법에 대해 알게 되었습니다. 이를 응용하여 실제 앱에서 유용하게 활용해보세요!

참고 문헌:

Flutter 공식 문서: https://flutter.dev/docs
StackOverflow: https://stackoverflow.com/