자니노트

Flutter InheritedWidget 라이브러리 설명 및 사용 방법 본문

모바일 개발/Dart&Flutter

Flutter InheritedWidget 라이브러리 설명 및 사용 방법

zaninote 2023. 8. 22. 14:45

InheritedWidget은 Flutter에서 데이터를 위젯 트리의 하위 레벨로 효율적으로 전달하는 데 사용되는 위젯입니다. 

이를 통해 중첩된 자식 위젯들이 부모 위젯의 데이터에 액세스할 수 있습니다.

 


InheritedWidget의 주요 특징:

  • 데이터 공유: InheritedWidget은 위젯 트리의 상위 레벨에서 하위 레벨로 데이터를 전달하는 데 사용됩니다.
  • 효율성: InheritedWidget은 데이터를 요청할 때마다 새로운 객체를 생성하지 않습니다.
  • 반응형 업데이트: InheritedWidget은 데이터가 변경될 때 관련된 자식 위젯들만을 다시 빌드하도록 할 수 있습니다.

 

사용 방법:

  • 정의: InheritedWidget을 확장하는 새 클래스를 생성합니다. 이 클래스는 원하는 데이터와 함께 상태를 저장합니다.
  • 데이터 제공: 위젯 트리에서 InheritedWidget의 인스턴스를 생성하여 데이터를 제공합니다.
  • 데이터 액세스: 자식 위젯에서 BuildContext의 dependOnInheritedWidgetOfExactType 메서드를 사용하여 데이터에 액세스합니다.

예제:

import 'package:flutter/material.dart';

// 1. InheritedWidget을 확장하는 클래스를 정의합니다.
class MyInheritedData extends InheritedWidget {
  final String data;

  MyInheritedData({@required this.data, @required Widget child})
      : super(child: child);

  @override
  bool updateShouldNotify(MyInheritedData oldWidget) {
    return data != oldWidget.data;
  }

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 2. 데이터를 제공합니다.
    return MyInheritedData(
      data: "Hello from InheritedWidget!",
      child: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 3. 데이터에 액세스합니다.
    final inheritedData = MyInheritedData.of(context);

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(inheritedData.data),
        ),
      ),
    );
  }
}

 

위의 예제에서 MyInheritedData 클래스는 InheritedWidget을 확장하며, data라는 문자열을 저장합니다. 

MyApp 위젯에서 MyInheritedData의 인스턴스를 생성하여 데이터를 제공하고, Home 위젯에서는 MyInheritedData.of(context)를 사용하여 데이터에 액세스합니다.

이렇게 InheritedWidget을 사용하면 중첩된 자식 위젯들이 부모 위젯의 데이터에 쉽게 액세스할 수 있습니다.

Comments