전역 키를 사용하여 Flutter의 다른 위젯에서 위젯 상태를 업데이트하는 방법은 무엇입니까?

Question

메인 위젯 화면에는 헤더 (빨간색으로 표시)와 목록 (보라색으로 표시)의 두 가지 기본 위젯이 포함되어 있습니다

.

    class ScreenClient extends StatefulWidget {
      _ClientState createState() => _ClientState();
    }
    
    class _ClientState extends State<ScreenClient> {
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ClientHeader(), // this is my header widget red
            Expanded(
              child: ClientList(), // this is my list widget purple
            ),
          ],
        );
      }
    }

당신이 볼 수있는 세 가지 옵션이 위젯 헤더 Tous Bloqué및 ayant Retard이러한 옵션이 필터하고 있기 때문에, 제가 달성하기 위해 노력하고있어 보라색으로 표시 위젯리스트에 클릭 된 옵션의 값을 전달하다 (목록 요소에 기초하여 표시한다 선택한 옵션)
상태 관리 패키지를 이해하는 데 어려움이 있으며 내가 이해하는 것에서 Global Keys트릭을 할 수 있지만 어떻게? . 내 헤더 위젯 코드는 다음과 같습니다.

class ClientHeader extends StatefulWidget {
  _HeaderClientState createState() => _HeaderClientState();
}

class _HeaderClientState extends State<ClientHeader> {
  String nomSituation;
  String option = "Tous";

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          GestureDetector(
            child: Text(
              "Tous",
              style: TextStyle(
                color: option == "Tous" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Tous";
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Bloqué",
              style: TextStyle(
                color: option == "Bloqué" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Bloqué";
                //add send value to ClientList widet ?
              });
            },
          ),
          GestureDetector(
            child: Text(
              "Ayant Retard",
              style: TextStyle(
                color:
                    option == "Ayant Retard" ? Colors.white : Colors.grey[400],
              ),
            ),
            onTap: () {
              setState(() {
                option = "Ayant Retard";
              });
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

이 비디오 에서 Flutter의 Pragmatic State Management (Google I / O'19) 에 대한 두 가지 예를 볼 수 있습니다 state mangement. 이 비디오는 처음에 플러터를 배울 때 많은 도움이되었습니다. 그들은 StatefulWidget다른 하나에서 제어하는 방법을 설명합니다 .

1. 상태를 전역으로 만들고 다른 위젯에 의해 제어됩니다 (5 분 30 초 부터 ).
2. 이용 Provider값 (2 위젯 제어부 사이에 주, 플러터에서 매우 인기있는 해결책이 15m05s에서 )

당신은 더 많은 시간을 가지고 Bloc, MobX ( List of state management approach ) 또는 Provider를 사용할 때 몇 가지 단점을 해결하려고 시도하는 Provider명명 된 riverpod 의 고급 버전을 공부할 수 있습니다.