2. stateProvider

shin·2023년 3월 13일
0

Flutter riverpod

목록 보기
2/6
  • 가장 기본이 되는 stateProvider를 살펴보겠다.

Provider 생성

  • state_provider.dart 파일을 생성하고 코드를 작성한다.
import 'package:flutter_riverpod/flutter_riverpod.dart';

final numberProvider = StateProvider((ref) => null);
  • StateProvider를 작성하면 자동완성으로 riverpodimport된다.
  • StateProvider 파라미터에는 함수를 받는데 여기서 null은 관리하고 싶은 값이 들어가게 된다.
  • 이번 예제에서는 숫자를 관리하기 때문에 null0을 넣어준다.
  • 제너릭에는 어떤 타입을 반환해 줄 건지를 넣어주면 된다.
final numberProvider = StateProvider<int>((ref) => 0);

사용하기

  • Provider를 사용하기 위해 스크린 파일을 생성한다.
  • 사용하기 앞서, stateless 위젯을 수정해 줘야 한다.
  • extends하고 있는 StatelessWidgetConsumerWidet으로 수정하고 build 위젯에 파라미터로 WidgetRef ref를 추가해 준다.
class StateProviderScreen extends ConsumerWidget {
  const StateProviderScreen({Key? key}) : super(key: key);

  
  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);

  
  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를 어디에서든지 사용하던 값이 유지되는 것을 알 수 있다.

1개의 댓글

comment-user-thumbnail
4일 전

안녕하세요. 혹시 질문 하나 드려도될까요? 윈도우 vscode로 플러터 provider 공부하고 있는데, 필요한 패키지도 pubspec.yaml에 작성하고 자동완성 확장팩도 설치하고 했는데... 이상하게 다른 것들은 자동완성이 잘 되는 것 같은데... provider 관련해서만 자동완성이 잘 안되는 것 같아서요ㅠㅠ

이를테면... final numberProvider = StateProvider((ref) => 0); 이렇게 ((ref) => 0); 자동완성이 되어야 하는데, 저는 final numberProvider = StateProvider(_createFn) 이렇게 자동완성이 됩니다...ㅠㅠ ref.watch나 read도 자동완성이 이상하구요. 서치해봐도 정보가 너무 없어서... 혹시나 하고 댓글 남겨봅니다 ㅠㅠ

답글 달기