[Flutter / 플러터] ModalBottomSheet에 SetState 효과 부여하기

ModalBottomSheet 위젯은 화면을 어둡게 하고 하단에 시트를 표출시키는 위젯입니다.

보통 시트내에 버튼들을 구성하여 선택에 따른 이벤트를 받는 위주의 표현을 위해 사용하는 위젯이지만 유저 인터랙션에 따라 표현을 해야할 때의 구현 방법을 소개합니다.

 

 

SetState를 사용하기 위해선 ModalBottomSheet 내부에 StatefulBuilder 위젯을 추가하여 ModalBottomSheet 내에서 SetState 처리가 일어나도록 구현하면 됩니다.

 

아래는 구현하는 방법에 대한 코드 입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  // 상태를 관리할 변수
  int _counter = 0;

  // 모달 하단 시트 표시 함수
  void _showModalBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          // StatefulBuilder를 사용하여 setState를 하단 시트 내에서 사용할 수 있도록 함
          builder: (BuildContext context, StateSetter setState) {
            return Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('Counter: $_counter'),
                  ElevatedButton(
                    onPressed: () {
                      // setState를 사용하여 _counter를 업데이트
                      setState(() {
                        _counter++;
                      });
                    },
                    child: Text('Increment Counter'),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ModalBottomSheet with setState'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showModalBottomSheet,
          child: Text('Show Modal Bottom Sheet'),
        ),
      ),
    );
  }
}