[flutter] 플러터 프로바이더의 관찰 가능한 데이터 처리

14 Dec 2023

flutter

플러터(Flutter)는 사용자 인터페이스(UI)를 만들기 위한 Google의 프레임워크입니다. 상태 관리는 모든 앱에서 중요한 부분이며, 플러터는 이를 위해 프로바이더(Provider)라는 패키지를 제공합니다. 프로바이더는 변경 내용을 알림을 통해 감시할 수 있는 관찰 가능한(Observable) 데이터를 제공하여 상태를 관리합니다.

프로바이더를 사용한 관찰 가능한 데이터

플러터 앱에서 프로바이더를 사용하여 변경 사항을 감지하고 관찰할 수 있는 데이터를 갖는 것은 매우 중요합니다. 이를 통해 UI가 데이터에 따라 실시간으로 업데이트되고 앱의 상태가 변할 때마다 작업을 수행할 수 있습니다.

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => MyModel(),
      child: MyApp(),
    ),
  );
}

class MyModel extends ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('플러터 프로바이더 예제')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '버튼을 누를 때마다 숫자가 증가합니다:',
              ),
              Consumer<MyModel>(
                builder: (context, myModel, child) {
                  return Text(
                    '${myModel.counter}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              Provider.of<MyModel>(context, listen: false).increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 예제 코드에서 MyModel 클래스는 ChangeNotifier를 확장하여 상태를 변경할 때마다 notifyListeners를 호출하여 관찰 가능한 데이터를 업데이트하고, Consumer 위젯은 특정 모델 클래스를 감시하여 UI를 변경합니다.

결론

플러터의 프로바이더는 관찰 가능한 데이터를 사용하여 앱의 상태를 효과적으로 관리할 수 있게 해줍니다. 이는 매우 강력하며, 효율적인 상태 관리를 위한 필수 도구입니다.

더 많은 내용을 찾으시려면 플러터 공식 홈페이지를 방문해 주세요.