본문 바로가기
프로그래밍

[Flutter] 다이어로그 내에서 State 적용하기

by hansoo.labs 한수댁 2020. 8. 13.

입력 확인창

다이어로그에서 텍스트 입력을 바로 검증하여 버튼의 활성상태를 변경하고자 한다. 다이어로그의 Context가 다이어로그를 호출한 위젯의 Context와 다르기 때문에 별도로 State 가 관리되어야 한다. 

이때 StatefulBuilder 로 content를 구성하면 커스텀 위젯 클래스를 새로 만들지 않고 간단히 구현할 수 있다.

요로케..

void _promptDeletion() async {
    bool confirmed = await _showConfirmDeletion();
    print("_accountDeletion $confirmed");
  }

  Future<bool> _showConfirmDeletion() async {
    bool confirm = await showDialog(
        context: context,
        builder: (context) {
          // 변경하고자 하는 속성
          bool validation = false;
          return AlertDialog(
            content: StatefulBuilder(
              builder: (BuildContext context, StateSetter setter) {
                return Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text("계정 삭제"),
                      SizedBox(height: 20),
                      Text("정말 삭제를 원하시면, 아래 숫자를 입력해주세요. 감사합니다."),
                      SizedBox(height: 20),
                      TextFormField(
                        decoration: InputDecoration(hintText: '1234'),
                        onChanged: (s) {
                          print(s);
                          // 입력에 따라 속성 변경
                          setter(() {
                            validation = _deletionCode == s;
                          });
                        },
                      ),
                      SizedBox(height: 20),
                      // 상태변경을 위해 버튼은 이곳 builder 안에 존재해야 한다.
                      NavigationBar( // <- 단순 Custom UI
                        backText: "취소",
                        onClickBack: () {
                          Navigator.of(context).pop(false);
                        },
                        nextText: "삭제",
                        nextEnabled: validation,
                        onClickNext: () {
                          Navigator.of(context).pop(validation);
                        },
                        shadowing: false,
                      ),
                    ],
                  );
              },
            ),
          );
        });

    return confirm;
  }

댓글0