[flutter] 플러터 프로바이더를 활용한 반응형 UI 개발

14 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 플랫폼에서 동작하는 반응형 UI를 쉽게 구현할 수 있습니다. 이번에는 플러터의 내장된 기능 중 하나인 프로바이더(Provider)를 활용하여 반응형 UI를 개발하는 방법에 대해 소개하겠습니다.

프로바이더(Provider)란?

플러터의 프로바이더는 상태 관리 패키지로, 위젯 트리 전체에서 데이터를 공유하고 관리할 수 있도록 해줍니다. 프로바이더를 사용하면 상태 변화에 따라 자동으로 UI를 업데이트할 수 있어, 반응형 UI를 쉽게 구현할 수 있습니다.

프로바이더를 활용한 반응형 UI 개발

프로바이더를 사용하여 반응형 UI를 개발하는 방법은 다음과 같습니다.

1. 프로바이더 의존성 추가

먼저, pubspec.yaml 파일에 다음과 같이 프로바이더 패키지를 추가합니다.

dependencies:
  provider: ^5.0.0

2. 모델 클래스 정의

반응형으로 관리할 데이터 모델 클래스를 정의합니다.

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 상태 변화 감지
  }
}

3. 프로바이더 제공

앱 전체에서 사용할 상태를 제공하는 프로바이더를 정의합니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
    );
  }
}

4. 프로바이더 사용

위젯에서 Provider.of나 Consumer를 사용하여 상태를 가져와 UI를 업데이트합니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);

    return Scaffold(
      // ...
      body: Center(
        child: Text(
          '${counter.count}', // 상태 반영
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(), // 상태 변경
        child: Icon(Icons.add),
      ),
    );
  }
}

요약

플러터의 프로바이더를 활용하면 상태 관리를 효과적으로 할 수 있으며, 반응형 UI를 쉽게 개발할 수 있습니다. 프로바이더를 사용하여 데이터를 관리하고 UI를 업데이트하는 방법을 숙지하면, 플러터 앱의 사용자 경험을 향상시킬 수 있을 것입니다.

반응형 UI 개발에 대한 더 자세한 내용은 공식 문서를 참고하세요.