[Flutter] Provider 사용해보기

GetX만 사용하다보니 Flutter 개발자가 아니라 GetX 개발자가 된 느낌이 들어 Provider를 통해 Flutter 개발의 범위를 넓히려고 했다.

아래의 코드는 구글링을 통해 찾은 Provider 패키지를 사용한 예제의 코드 패턴을 학습해서 만든 예시이다.

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});
	
  @override
  Widget build(BuildContext context) {
	return ChangeNotifierProvider(
	  create: (context) => SomeProvider(),
	  child: Scaffold(
		body: Center(
          child: Consumer<SomeProvider>(				
            builder: (context, provider, child) => Column(
              mainAxisAlignment: MainAxisAlignment.center,
			  children: [
				Text(
                  '${provider.person['name']} :'
				  '${provider.person['age']}'
				),
				ElevatedButton(
				  onPressed: () async {
					await provider.addAge();
				  },
				  child: const Text('Click'),
				),
			  ],
		    ),
		  ),
		),
	  ),
    );
  }
}

  
class SomeProvider extends ChangeNotifier {
  Map<String, dynamic> person = {
    'name': 'Jack',
	'age': 25,
  };
	
  Future<void> addAge() async {
	await Future.delayed(const Duration(seconds: 2));
	person['age'] = 26;
	notifyListeners();
  }
}

provider는 notifyListeners() 함수를 통해 변화를 UI에 갱신한다.

여기서 한 가지 궁금증이 생겼다.

notifyListeners()를 호출하는 모든 함수는 전부 void타입의 함수로 정의해야하는건가?

그래서 구글에 찾아보니 따로 관련된 답변을 찾을 수 없어 직접 테스트 해봤다.

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});
	
  @override
  Widget build(BuildContext context) {
	return ChangeNotifierProvider(
	  create: (context) => SomeProvider(),
	  child: Scaffold(
		body: Center(
		  child: Consumer<SomeProvider>(
		    builder: (context, provider, child) => Column(
			  mainAxisAlignment: MainAxisAlignment.center,
			  children: [
				Text(
				  '${provider.person['name']} :'
				  '${provider.person['age']}'
				),
				ElevatedButton(
				  onPressed: () => provider.addAge().then(
					(value) => showDialog(
					  context: context,
					  builder: (context) => AlertDialog(
						content: Text('$value'),
					  ),
					),
				  ),
				  child: const Text('Click'),
			    ),
              ],
            ),
		  ),
		),
	  ),
    );
  }
}
 

class SomeProvider extends ChangeNotifier {
  Map<String, dynamic> person = {
	'name': 'Jack',
	'age': 25,
  };
	
  Future<int> addAge() async {
    await Future.delayed(const Duration(seconds: 2));
	person['age'] = 26;
	notifyListeners();
	
    await Future.delayed(const Duration(seconds: 2));
	person['age'] = 27;
	notifyListeners();
		
	return 10;
  }
}

이렇게 코드를 작성하니 결과적으로 2초 간격으로 화면이 2번 갱신된 후 곧바로 다이얼로그가 나타나 숫자 10을 표시했다.

결론적으로 notifyListeners()함수는 타입에 관계없이 사용할 수 있다.

Provider를 잠깐 사용해보니 GetX에 비해 코드 자체가 굉장히 직관적인 느낌이 들었다. GetX는 사용하기는 편리하지만 코드가 많아질수록 복잡해지는 느낌을 받았다면, Provider는 개발자가 확실하게 언제 화면을 갱신해줄지 명시함으로서 코드가 많아질수록 GetX보다 가독성 및 유지보수가 더욱 수월할 것 같다는 느낌이 든다.