[Flutter] Stateful Bottom Sheet 구현방법 #ValueChanged

'넠넠' 토이프로젝트를 진행하면서 Flutter에서 Bottom Sheet 위젯을 종종 사용하였는데
Bottom Sheet 내부의 state와 Bottom Sheet을 호출한 class의 state가 모두 바뀌도록 구현하는 경우가 있다.
이럴 때, 내가 사용한 코드를 기록해 두려고 한다!

먼저, 예시 코드를 보자.

import 'package:flutter/material.dart';
class BottomSheetState extends StatefulWidget {
  @override
  _BottomSheetStateState createState() => _BottomSheetStateState();
}

class _BottomSheetStateState extends State<BottomSheetState> {
  bool toggleIcon = true;
  toggleIconState(bool value ) {
    setState(() {
      toggleIcon = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Icon(
                  toggleIcon ? Icons.check_box : Icons.check_box_outline_blank
              ),
              ElevatedButton(onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: ( BuildContext context ) {
                      return StatefulBottomSheet(toggleIcon: toggleIcon, valueChanged: toggleIconState,);
                    }
                );
              } , child: Text('Show Bottom Sheet'))
            ],
          ),
        ),
      ),
    ) ;
  }
}

class StatefulBottomSheet extends StatefulWidget {
  final bool toggleIcon;
  final ValueChanged<bool> valueChanged;
  StatefulBottomSheet( {Key? key, required this.toggleIcon, required this.valueChanged } );

  @override
  _StatefulBottomSheetState createState() => _StatefulBottomSheetState();
}

class _StatefulBottomSheetState extends State<StatefulBottomSheet> {
  late bool _toggleIcon;
  @override
  void initState() {
    _toggleIcon = widget.toggleIcon;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return  Container(
      color: Colors.blue,
      child: Column(
        children: [
          IconButton(onPressed:  () {
            setState(() {
              _toggleIcon= !_toggleIcon;
            });
            widget.valueChanged(_toggleIcon);
          } ,
              icon: Icon(
                  _toggleIcon ? Icons.check_box : Icons.check_box_outline_blank
              ) )
        ],
      ),
    );
  }
}

[출처: https://howtoflutter.dev/how-to-change-update-the-state-inside-bottom-sheet-in-flutter/]

이 긴~ 코드에서 우리가 ⭐️주목⭐️해야 하는 부분은 다음과 같다.

🎈 _BottomSheetStateState class

• toggleIconState() 메소드 : toggleIcon 값을 토글링
• showModalBottomSheet() 메소드: StatefulBottomSheet class 호출

🎈 StatefulBottomSheet class

• ValueChanged<> valueChanged
  : widget.valueChanged(_toggleIcon) 을 호출하면, 업데이트된 _toggleIcon의 value가 BottomSheetStateState class의 _toggleIcon에 적용됨

☝🏻 요 아이!! 앞으로 유용하게 쓰일 것 같다 😙