- 가장 기본이 되는
stateProvider
를 살펴보겠다.
Provider 생성
state_provider.dart
파일을 생성하고 코드를 작성한다.
import 'package:flutter_riverpod/flutter_riverpod.dart';
final numberProvider = StateProvider((ref) => null);
StateProvider
를 작성하면 자동완성으로 riverpod
이 import
된다.
StateProvider
파라미터에는 함수를 받는데 여기서 null
은 관리하고 싶은 값이 들어가게 된다.
- 이번 예제에서는 숫자를 관리하기 때문에
null
에 0
을 넣어준다.
- 제너릭에는 어떤 타입을 반환해 줄 건지를 넣어주면 된다.
final numberProvider = StateProvider<int>((ref) => 0);
사용하기
Provider
를 사용하기 위해 스크린 파일을 생성한다.
- 사용하기 앞서,
stateless
위젯을 수정해 줘야 한다.
extends
하고 있는 StatelessWidget
을 ConsumerWidet
으로 수정하고 build
위젯에 파라미터로 WidgetRef ref
를 추가해 준다.
class StateProviderScreen extends ConsumerWidget {
const StateProviderScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return DefaultLayout(
title: 'StateProviderScreen',
body: Column(
children: [],
),
);
}
}
build
위젯에 추가한 ref
는 앞서 provider를 생성했을 때 사용했던 ref
와 같다. ref
를 통해서 provider를 읽고 사용할 수 있다.
ref.watch()
를 하면 numberProvider
의 변경된 값이 UI에 나타나게 해줄 수 있다.
- 버튼을 누르면 1씩 값이 증가하는 예제를 작성해 보았다.
provider
값을 가져오기 위해서는 ref.read()
를 사용한다.
read()
안에는 numberProvider.notifier
를 넣어주고 update()
메소드를 사용해서 1씩 추가되는 함수를 작성한다.
update()
안에 state는 현재 상태를 의미한다. state + 1
은 현재상태에서 1을 더하라는 의미이다.
class StateProviderScreen extends ConsumerWidget {
const StateProviderScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final provider = ref.watch(numberProvider);
return DefaultLayout(
title: 'StateProviderScreen',
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
provider.toString(),
),
ElevatedButton(
onPressed: () {
ref.read(numberProvider.notifier).update(
(state) => state + 1,
);
},
child: Text('UP'),
),
],
),
),
);
}
}
UP
버튼을 누르면 값이 1씩 증가하는 것을 볼 수 있다. 그런데 중간에 뒤로가기 버튼을 눌러 뒤로 갔다 되돌아오게 되면 값이 초기화가 되지 않는 것을 볼 수 있다.
Provider
의 watch()에 의해 값이 모니터링 되기 때문에 같은 Provider
를 어디에서든지 사용하던 값이 유지되는 것을 알 수 있다.
안녕하세요. 혹시 질문 하나 드려도될까요? 윈도우 vscode로 플러터 provider 공부하고 있는데, 필요한 패키지도 pubspec.yaml에 작성하고 자동완성 확장팩도 설치하고 했는데... 이상하게 다른 것들은 자동완성이 잘 되는 것 같은데... provider 관련해서만 자동완성이 잘 안되는 것 같아서요ㅠㅠ
이를테면... final numberProvider = StateProvider((ref) => 0); 이렇게 ((ref) => 0); 자동완성이 되어야 하는데, 저는 final numberProvider = StateProvider(_createFn) 이렇게 자동완성이 됩니다...ㅠㅠ ref.watch나 read도 자동완성이 이상하구요. 서치해봐도 정보가 너무 없어서... 혹시나 하고 댓글 남겨봅니다 ㅠㅠ