[flutter] 플러터 get과 provider 패키지

26 Dec 2023

flutter

플러터 앱을 개발하다보면 상태 관리가 필요한 경우가 많은데, 이때 Get과 Provider 패키지를 사용하면 효율적으로 상태를 관리할 수 있습니다.

Get 패키지

Get 패키지는 플러터의 간단한 상태 관리를 위한 패키지입니다. Get을 이용하면 화면 간의 데이터 전달이 쉬워지고, Route와 상태 관리를 효율적으로 수행할 수 있습니다.

Get 패키지를 사용하기 위해서는 get: ^x.x.x와 같이 pubspec.yaml 파일에 의존성을 추가해야 합니다.

다음은 간단한 Get 패키지의 사용 예시입니다.

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

void main() {
  runApp(GetMaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get 패키지 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.to(NextPage());
          },
          child: Text('다음 페이지로 이동'),
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('다음 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.back();
          },
          child: Text('이전 페이지로 돌아가기'),
        ),
      ),
    );
  }
}

Provider 패키지

Provider 패키지는 플러터 앱에서 상태 관리를 위한 패키지로, 상속을 통한 데이터 전달을 간단하게 처리할 수 있습니다. 또한, Provider를 이용하면 상태 변화에 따른 위젯을 업데이트하는 것이 간편해집니다.

Provider 패키지를 사용하기 위해서는 provider: ^x.x.x와 같이 pubspec.yaml 파일에 의존성을 추가해야 합니다.

다음은 간단한 Provider 패키지의 사용 예시입니다.

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

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

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider 패키지 예제'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('버튼을 누른 횟수:',),
              Consumer<Counter>(
                builder: (context, counter, child) => Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<Counter>(context, listen: false).increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Get과 Provider 패키지는 각각 간편하게 상태 관리와 데이터 전달을 할 수 있게 도와줍니다. 선택은 개인의 취향과 상황에 맞게 하시면 됩니다.

더 자세한 내용을 알고 싶다면 Get 패키지 공식 문서, Provider 패키지 공식 문서를 참고하세요.