Flutter의 InheritedWidget 사용법

Flutter에서 상태 관리는 애플리케이션 개발의 중요한 부분입니다. 다양한 상태 관리 패턴 중 InheritedWidget은 위젯 트리에서 상태를 효율적으로 전달하고 관리하는 데 사용됩니다. InheritedWidget은 상위 위젯의 상태를 하위 위젯에서 접근할 수 있도록 하는 기능을 제공합니다. 이번 글에서는 InheritedWidget을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. InheritedWidget의 기본 개념

InheritedWidget은 위젯 트리에서 상위 위젯의 데이터를 하위 위젯에 전달하기 위해 사용됩니다. 하위 위젯은 InheritedWidget을 통해 데이터를 구독하고, 상위 위젯의 상태가 변경되면 하위 위젯이 다시 빌드됩니다. 이는 상태를 공유하고 전달하는 데 유용하며, 상태 관리를 간소화할 수 있습니다.

2. InheritedWidget 구현하기

InheritedWidget을 구현하려면 다음 세 가지를 정의해야 합니다:

• InheritedWidget 클래스: 상태를 보유하고, 하위 위젯에 전달하는 역할을 합니다.
• 상태 클래스: InheritedWidget이 보유하는 실제 상태를 정의합니다.
• StatefulWidget 클래스: InheritedWidget을 포함하고 상태를 관리합니다.

3. Counter 예제 구현

이제 InheritedWidget을 사용하여 간단한 카운터 애플리케이션을 구현해보겠습니다.

 

Step 1: InheritedWidget 클래스 정의

먼저, 상태를 보유하고 하위 위젯에 전달하는 InheritedWidget 클래스를 정의합니다.

import 'package:flutter/material.dart';

class CounterInheritedWidget extends InheritedWidget {
  final int counter;
  final Function() incrementCounter;

  CounterInheritedWidget({
    Key? key,
    required this.counter,
    required this.incrementCounter,
    required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    return oldWidget.counter != counter;
  }

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

 

Step 2: 상태 관리 클래스 정의

InheritedWidget이 보유하는 실제 상태를 정의합니다.

import 'package:flutter/material.dart';

class CounterState extends StatefulWidget {
  final Widget child;

  CounterState({Key? key, required this.child}) : super(key: key);

  @override
  _CounterStateState createState() => _CounterStateState();

  static _CounterStateState? of(BuildContext context) {
    return context.findAncestorStateOfType<_CounterStateState>();
  }
}

class _CounterStateState extends State<CounterState> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterInheritedWidget(
      counter: _counter,
      incrementCounter: _incrementCounter,
      child: widget.child,
    );
  }
}

 

 

반응형

 

 

Step 3: UI 구현

이제 InheritedWidget을 사용하여 UI를 구현합니다.

import 'package:flutter/material.dart';
import 'counter_state.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CounterState(
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterInheritedWidget = CounterInheritedWidget.of(context);

    return Scaffold(
      appBar: AppBar(title: Text('InheritedWidget Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counterInheritedWidget!.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterInheritedWidget.incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 InheritedWidget을 사용하여 상태를 관리하고, 하위 위젯에서 이를 접근하여 UI를 업데이트하는 예제입니다. CounterInheritedWidget은 상위 위젯에서 상태를 보유하고, 하위 위젯에 전달합니다. CounterState는 StatefulWidget으로서 상태를 관리하고, CounterScreen은 상태를 구독하여 UI를 업데이트합니다.

4. InheritedWidget의 장점

• 상태 공유: 상위 위젯의 상태를 하위 위젯에서 손쉽게 접근할 수 있습니다.
• 재사용성: 동일한 상태를 여러 하위 위젯에서 재사용할 수 있습니다.
• 일관성: 상태 변경 시 관련된 모든 하위 위젯이 자동으로 다시 빌드되어 일관된 UI를 유지할 수 있습니다.

5. InheritedWidget의 단점

• 복잡성: 복잡한 상태 관리에는 다소 번거로울 수 있습니다.
• 성능 문제: 많은 하위 위젯이 있을 경우, 상태 변경 시 많은 위젯이 다시 빌드되어 성능에 영향을 줄 수 있습니다.

결론

InheritedWidget은 Flutter에서 상태를 효율적으로 전달하고 관리할 수 있는 강력한 도구입니다. 상위 위젯의 상태를 하위 위젯에 전달하여 일관된 상태 관리를 할 수 있으며, 이를 통해 애플리케이션의 유지 보수성과 확장성을 향상시킬 수 있습니다. InheritedWidget을 적절히 활용하여 효율적이고 일관된 상태 관리를 구현해보세요.