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