[Flutter] ProxyProvider - update

오늘은 ProxyProvider 에 대해서 알아보겠습니다. Provider 에서 사용하는 변수가 다른 Provider 에 영향을 미치는 경우 , 또는 외부의 변수가 Provider 에 영향을 미치는 경우 사용한다.

개발환경 : 윈도우11, 안드로이드 스튜디오(Arctic Fox 2020.3.1 Patch 4), flutter 2.10

소스코드 - Release 22_ProxyProvider · mike-bskim/provider_overview (github.com)

Release 22_ProxyProvider · mike-bskim/provider_overview

 

소스코드중에서 ./pages/proxyprov_update.dart 파일에 대한 설명입니다.

 

숫자를 받아서 문자열을 만드는 클래스가 있습니다.

 

class Translations {
  const Translations(this._value);
  final int _value;

  String get title => 'You clicked $_value times';
}

 

호출하는 부분은 아래와 같습니다. update 옵션만 사용하는 경우(인스턴스 생성과 동시에 변수설정이 가능).

create 옵션을 사용해도 되지만 1번만 호출되므로 의미가 없음.

 

class ProxyProvUpdate extends StatefulWidget {
  const ProxyProvUpdate({Key? key}) : super(key: key);

  @override
  _ProxyProvUpdateState createState() => _ProxyProvUpdateState();
}

class _ProxyProvUpdateState extends State<ProxyProvUpdate> {
  int counter = 0;

  void increment() {
    setState(() {
      counter++;
      debugPrint('counter: $counter');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProxyProvider update'),
      ),
      body: Center(
      // update 를 사용하여 counter 가 변할때마다 _value 설정가능
        child: ProxyProvider0<Translations>(
          update: (_, __) => Translations(counter),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const ShowTranslations(),
              const SizedBox(height: 20.0),
              IncreaseButton(increment: increment),
            ],
          ),
        ),
      ),
    );
  }
}

class ShowTranslations extends StatelessWidget {
  const ShowTranslations({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  // ProxyProvider0 도 Provider 속하므로 아래처럼 접근 가능
    final title = Provider.of<Translations>(context).title;

    return Text(
      title,
      style: const TextStyle(fontSize: 28.0),
    );
  }
}

// 함수를 인자로 전달
class IncreaseButton extends StatelessWidget {
  final VoidCallback increment;
  const IncreaseButton({
    Key? key,
    required this.increment,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: increment,
      child: const Text(
        'INCREASE',
        style: TextStyle(fontSize: 20.0),
      ),
    );
  }
}

 

 

 

 

[참고자료] udemy - Flutter Provider Essential 코스 (Korean)