[Flutter - Riverpod] StateProvider

설명

- StateProvider는 상태 변화를 통해 UI를 수정할 수 있다.

- 단순한 데이터를 조작할 때 사용한다.

 

import 'package:flutter_riverpod/flutter_riverpod.dart';

final numberProvider = StateProvider((ref) => 0);

- 숫자 0이 초기값은 상태를 만든다.

 

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'),
            ),
            ElevatedButton(
              onPressed: () {
                ref.read(numberProvider.notifier).state = ref.read(numberProvider.notifier).state - 1;
              },
              child: Text('DOWN'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => _NextScreen(),
                  ),
                );
              },
              child: Text('Next Screen'),
            )
          ],
        ),
      ),
    );
  }
}

- update와 직접 수정하는 방식으로 숫자를 올렸다 내렸다 할 수 있다.