InheritedWidget은 좋아하세요?

Photo by Todd Quackenbush on Unsplash

맨날 나오는 그 주제. 상태관리.

“초보자도 쉽게 쓸 수 있는 상태관리 패키지 추천해주세요.”

“상태관리 배우고 싶은데 Bloc 이랑 riverpod 중에 뭐가 좋아요?”

항상 이런 질문들을 볼 때마다 제발 초보자면 InheritedWidget 부터 배우세요 라고 외치고 싶은 마음을 참는다.

자기가 플러터를 좀 했다고 하는 사람들도 InheritedWidget 에 대해서 아는 사람들이 거의 없다.

그거는 보일러플레이트가 많아서…

너무 어렵지 않나요?

그럴까? 아래 코드를 보자.

데이터 전파

class MyInheritedWidget extends InheritedWidget {
    MyInheritedWidget({
        Key? key,
        required Widget child,
        required this.data,
    }): super(key: key, child: child);
    
    final String data;

    @override
    bool updateShouldNotify(MyInheritedWidget oldWidget) => data != oldWidget.data;
}

이게 전부이다. 허구하게 쓰이는 StatefulWidget 보다 훨씬 간결한 코드다. 이제 data를 child 에서 접근할 수 있게 된다.

데이터 가져오기

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyInheritedWidget(
          data: 'my data',
          child: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyInheritedWidget? widget = context.getInheritedWidgetOfExactType<MyInheritedWidget>();
    
    return Text(
      widget?.data ?? 'Hello, World!',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

가져오는 것도 간단하다.

MyInheritedWidget의 자손 위젯들에서 context를 통해서 위젯에 접근할 수 있다.

여기서는 context.getInheritedWidgetOfExactType<T> 를 사용했다. 이게 제일 기본적인 접근 방법이다. 리턴 타입이 MyInheritedWidget 타입이 아니라 MyInheritedWidget? 이 되는데, 위젯트리 상에서 루트로 올라가면서 해당 InheritedWidget을 찾을 수 없다면 null 을 리턴한다.

— — —

좀 더 알아보기 : https://docs.flutter.dev/data-and-backend/state-mgmt/options#inheritedwidget--inheritedmodel

완전한 코드 : https://gist.github.com/letyletylety/ca702b20ab4f915172709993b91973dd

이 글에서 코드를 가져와서 일부 수정함 : https://www.flutteris.com/blog/en/widget-state-context-inheritedwidget