파파비의 블로그

플러터, flutter) Nested Provider(Widget State 수준) 사용하기 본문

개발/flutter

플러터, flutter) Nested Provider(Widget State 수준) 사용하기

N. Dave 2020. 6. 8. 10:01
반응형

우리가 위젯을 만들 때,

listview나 gridview 같은 것 안에 들어가는 위젯의 경우, 

 

Data Model을 만들어놓고, 그 Model의 값에 따라 위젯이 만들어지도록 하는 경우가 많다.

이런식으로 말이다.

Product라는 class 형태로 이루어진 data set이 있어서,

이 data set을 for문을 돌리든 해서, 바로 위젯으로 만들어버린다.

 

위젯을 만들 때, 위 사진처럼, 인수를 직접 넣어서, 진행했다. 

하지만 이것이 불편한 점이 있는데, 상태 변화에 따라 Rebuild를 하기 위해선 Statful 위젯을 사용해야 한다는 점이다.

그리고 저렇게 넣는것도 불편하고 말이다.

 

(만약 딱 저 위젯한테만 영향을 미치고, 인수를 넣을 필요도 없고 하면 굳이 provider를 만들 필요없고

Stateful를 사용하는게 더 좋을 수도 있다.)

 

Provider를 사용하면 그럴 필요가 없다.

List나 grid에 위젯을 넣을 때,(꼭 이때만 한정된 것은 아니다만)

Provider를 부모위젯으로 넣어서, 하위 child 위젯이 Provider를 통해서 정보를 얻어가게 할 수 있다.

그리고 정보의 변화는 Provider를 통해 이루고, 변화가 일어나면 notifyListener를 통해 rebuild가 가능하다.

 

이때 특이한 점은, Global하게 data를 공유하는 것이 아니라, 위젯 수준이기 때문에, 

Provider와 Widget이 1:1 관계라는 것이다.

 

이 그리드 위젯을 보면,

itemBuilder에 ChangeNotifierProvider를 만들어내는 것을 볼 수 있다.

그리고 그 와 연결된 Provider는 products에 있는 개별적인 Product class 객체들이다.

여기에서는 products.length 만큼, Provider객체들이 만들어지는 것을 알 수 있다.

 

child 객체는 Provider를 읽어온 뒤에, 거기에 있는 data들을 통해 내부적인 부분을 채울 수 있고,

onPressed 등의 callback도 Provider 객체에서 다룰 수 있게 해서, 곧장 변화가 생기면 rebuild 되도록 설계할 수 있다.

 

이렇게 하는 것이 코드상으로도 훨씬 깔끔하고,

또한 rebuild가 원하는 위젯만 정확하게 할 수 있어서 좋다.

 

 

다만, 구독이라는 개념이 

Provider와 위젯을 context를 통해 연결하는 것이고, 또 List에서 다루다보니 알다시피

위젯이 지워지면 이슈가 생겼던 것을 기억할 것이다. 

List에서는 changeNotifierProvider.value를 써야 하며, 자세한 내용은 아래 글 참고.

 

https://papabee.tistory.com/104

 

반응형
Comments