InheritedWidget

오늘도 알고보자·2022년 2월 20일
0

InheritedWidget에 들어가기 앞서

앞으로 다뤄볼 Provider 나 아키텍쳐인 MVVM 패턴 이라던지 Clean architecture 로 가기 위해선 몇가지 알고 가야하는게 있다.
InheritedWidget, freezed 플러그인, result 클래스, 등등 이다.
InheritedWidget위젯은 잘안쓰이지만 왜 안쓰이는지, Provider 를 왜 더 사용하는 지에 대해서 짚어보고 갈 수 있다.

InheritedWidget

  • 플러터에서 제공하는 특수목적용 위젯
  • 위젯에서 필요한 데이터를 전달해주는 가장 쉬운 방법은 부모에게 자식으로 직접 전달하는 것이이지만 이건 비즈니스 로직이 늘어나면 상당히 비효율적이다.
  • InheritedWidget 를 이용해서 하위위젯에서 부모 위젯을 접근할 수 있게 해주는 위젯이다.
  • 해당 하위 트리의 모든 위젯 부분은 해당 InheritedWidget에 의해 노출 된 데이터와 상호 작용할 수 있어야합니다.
  • InheritedWidget은 데이터를 전파하고 공유하기 위해서는 위젯트리 최상단에 위치해야합니다(인스턴스 전달을 위해서).

시나리오

  • FrogColor라는 객체를 만들건데, 어떠한 화면에라도 쉽게 전달하고싶다.

  • 이때 InheritedWidget을 상속하면 된다.(extends)
  • 이렇게하려면 updateShouldNotify를 오버라이드를 해야한다→
    다른 위젯들에게 FrogColor의 값이 언제 변경됐다 라는걸 알려주꺼야? 라는 규칙을 정하는 거다.
  • 우리는 ⇒ 리턴에 ture로 뒀을거다.

static의 붙었으므로 두 코드는 별개의 관계이다.
final에서 인스턴스를 생성하고 기존의 컬러를 result에 담아준다.
이제 이걸 다른데서 어떻게 사용할까?

  • FrogColor.of context .color를 하면 우리가 위에서 사용할 FrogColor를 불러와준다.
  • UI 짜는곳에서 필요하다면 바로 불러서 사용할수있다.

시나리오 2

  • 카운트앱을 만든다.

  • counter는 final 이지만 얘를 조작할수있는건 Counter 클래스의 int를 조작하기 때문이다.

  • oldWidget의 counter랑 현재의 count와 비교를 해서 다르면 리프레쉬해서 다름을 알려준다.


  • 이렇게 inhertedWidget을 이용한 카운트 앱이 된다.

0개의 댓글