44. [Flutter] InheritedWidget 로 위젯 트리에 데이터 공유하기

앱 설정값을 각각의 화면에 제공해야할 경우가 있습니다. (앱의 음소거 상태 등...)

 

InheritedWidget 를 main.dart 에서 최상위 위젯으로 두면 InheritedWidget 에서 정의한 데이터를 모든 화면에서 쉽게 사용할 수 있습니다.

 

하지만, InheritedWidget 의 한계점은 값을 제공할뿐, 값의 수정이 불가능하다는 점입니다.

 

이를 보완하는 방법은

1. StatefulWidget을 하나 만들어서 InheritedWidget 을 자식으로 설정합니다.
2. 값의 수정하는 Function() 을 StatefulWidget에 만들어줍니다.
3. 이 Function()을 InheritedWidget 에서 받을 수 있도록 InheritedWidget 의 reqired에 추가합니다.
4. 전달된 Function()을 호출하여 InheritedWidget에서도 값을 수정할 수 있게 됩니다.

다만, 이 방법은 ChangeNotifier로 대체가 가능하니 참고만하셔도 됩니다.

 

---

아래 예시는 autoMute라는 bool형 값과 (자동 음소거를 사용 중인지 알아볼 수 있는 변수)

이를 autoMute를 toggle하여 값을 바꿔주는 Function()인 toggleMuted() 를 App 전역에서 사용할 수 있게 하는 예시입니다.

 

1.  InheritedWidget, StatefulWidget 만들기

InheritedWidget 과 이를 자식으로 갖는 StatefulWidget 소스 예시.

import 'package:flutter/material.dart';

class VideoConfigData extends InheritedWidget {
  final bool autoMute;
  final void Function() toggleMuted;
  const VideoConfigData(
      {super.key,
      required super.child,
      required this.autoMute,
      required this.toggleMuted});

  static VideoConfigData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<VideoConfigData>()!;
  }

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
}

class VideoConfig extends StatefulWidget {
  final Widget child;
  const VideoConfig({super.key, required this.child});

  @override
  State<VideoConfig> createState() => _VideoConfigState();
}

class _VideoConfigState extends State<VideoConfig> {
  late bool autoMute = false;
  void toggleMuted() {
    setState(() {
      autoMute = !autoMute;
    });
  }

  @override
  Widget build(BuildContext context) {
    return VideoConfigData(
        toggleMuted: toggleMuted, autoMute: autoMute, child: widget.child);
  }
}

 

• VideoConfigData: 이 클래스는 InheritedWidget를 확장하여 비디오 설정 데이터를 저장하고 공유합니다.
  
  • autoMute: 비디오의 자동 음소거 설정을 나타내는 bool 변수입니다. 이 변수는 음소거 설정 상태를 나타냅니다.
  • toggleMuted: void Function() 타입의 함수로, 이 함수는 음소거 설정 상태를 변경합니다.
• VideoConfig: 이 클래스는 StatefulWidget을 확장하며, 상태를 관리하고 VideoConfigData를 하위 위젯에 제공합니다.
  
  • child: 이 프로퍼티는 하위 위젯을 가리킵니다. VideoConfig 위젯은 이 하위 위젯을 감싸는 역할을 합니다.
    autoMute: 비디오의 자동 음소거 설정을 나타내는 bool 변수입니다. 처음에 false로 초기화되며, toggleMuted 함수를 호출할 때 토글됩니다.
  • toggleMuted(): 이 함수는 autoMute 값을 토글(반전)하는 역할을 합니다. 즉, 현재 설정값을 변경합니다.
• VideoConfig 위젯은 VideoConfigData를 사용하여 autoMute 값을 하위 위젯에게 제공합니다. 그리고 toggleMuted 함수를 사용하여 autoMute 값을 변경할 수 있도록 합니다.
  
  
• main.dart 또는 다른 화면에서 이 VideoConfig 위젯을 최상위 위젯으로 사용하면, VideoConfigData가 앱 내에서 비디오 설정을 관리하고 수정할 수 있는 중요한 역할을 합니다. 이렇게 하면 어느 화면에서든 해당 비디오 설정을 공유하고 변경할 수 있으며, 예를 들어 음소거 설정을 토글하거나 설정 값을 어떻게 표시할지를 관리할 수 있습니다.
  
  

2. 최상위 위젯으로 설정하기

main.dart 에서 App 내 최상위 위젯으로 설정

 

 

3. 다른 화면 위젯에서 사용하기

다른 화면 SwitchListTile 에서 사용 예시

SwitchListTile.adaptive(
    value: VideoConfigData.of(context).autoMute,
    onChanged: (value) {
    VideoConfigData.of(context).toggleMuted();
    },
)

 

위와 같이 모든 위젯에서 of(context) 로 값과 메소드를 호출 할 수 있게됩니다.
VideoConfigData.of(context).autoMute;
VideoConfigData.of(context).toggleMuted();

 

출처: 노마드코더