Flutter 플러터에서 ModalBottomSheet의 상태를 업데이트하는 방법은 무엇인가요?, How to update state of a ModalBottomSheet in Flutter?

질문

이 코드는 매우 간단합니다: 모달 바닥 시트를 보여주고 사용자가 버튼을 클릭하면 시트의 높이를 10만큼 증가시킵니다.

하지만 아무 일도 일어나지 않습니다. 실제로, 사용자가 바닥 시트를 "슬라이드"하여 크기를 업데이트합니다(스와이프가 시트의 내부 상태를 업데이트한다고 믿습니다).

제 질문은: 모달 바닥 시트의 상태 업데이트를 어떻게 호출할 수 있을까요?

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: heightOfModalBottomSheet,
        child: RaisedButton(

            onPressed: () {
              setState(() {
                heightOfModalBottomSheet += 10;
              });

            }),
      );
    });

답변

다음과 같이 Flutter의 StatefulBuilder를 사용하여 ModalBottomSheet을 감쌀 수 있습니다:

showModalBottomSheet(
    context: context,
    builder: (context) {
      return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState /*이름을 바꿀 수 있습니다!*/) {
        return Container(
          height: heightOfModalBottomSheet,
          child: RaisedButton(onPressed: () {
            setState(() {
              heightOfModalBottomSheet += 10;
            });
          }),
        );
      });
});

새로운 setState가 주 위젯의 setState를 덮어씁니다. 그러나 이름을 변경하여 부모 위젯과 모달의 상태를 설정할 수 있습니다.

//이것은 모달 상태를 설정합니다
setModalState(() {
    heightOfModalBottomSheet += 10;
});
//이것은 부모 위젯 상태를 설정합니다
setState(() {
     heightOfModalBottomSheet += 10;
});