💬

【Flutter】StateNotifierProviderの導入

に公開
Flutter
tech
  • importの解説は省略（VSCode拡張機能の自動importがおすすめ）

パッケージのインストール(pubspec.yaml内)

//pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  cached_network_image: ^3.4.1
  cupertino_icons: ^1.0.8
  flutter_riverpod: ^2.6.1　　　　//これを追加
  intl: ^0.20.2

//console
flutter pub get

Notifierの定義(丸暗記すると楽)

  • UserとGenderは別ファイルからとってきている
//hogehoge_page_notifier.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample_app/model/gender.dart';
import 'package:riverpod_sample_app/model/user.dart';


class EditProfilePageNotifier extends StateNotifier<User> {
  EditProfilePageNotifier() : super(User(
    id: '1',
    name: 'Yagoo',
    email: 'exsample@hoge.com',
    imageUrl: '',
    birthDate: DateTime(2000, 1, 1),
    gender: Gender.unknown,
    selfIntroduction: 'self introduction yea'
  ));

  void increment() {
    state = User(
      id: '2',
      name: 'Yagoo',
      email: 'exsample@hoge.com',
      imageUrl: '',
      birthDate: DateTime(2000, 1, 1),
      gender: Gender.unknown,
      selfIntroduction: 'self introduction yea'
    );
  }
}

final editProfilePageProvider =
    StateNotifierProvider<EditProfilePageNotifier, User>((ref) {
  return EditProfilePageNotifier();
});

呼び出し

//hogehoge_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample_app/const.dart';
import 'package:riverpod_sample_app/pages/edit_profile/efit_profile_page_notifier.dart';

class EditProfilePage extends ConsumerWidget {  //変更
  const EditProfilePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {　　　　　　　// 追加
    final current_user = ref.watch(editProfilePageProvider);       // 追加
    final notifier = ref.read(editProfilePageProvider.notifier);   // 追加
    return Scaffold(
      appBar: AppBar(
        title: const Text('profile edit'),
        backgroundColor: primaryColor,
      ),
      body: ElevatedButton(
        onPressed: notifier.increment,　　　　　　　　　　　　　　　　　// 追加
        child: const Text('+'),
      ),
    );
  }
}

//main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample_app/pages/my_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ProviderScope(                               //追加
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        ),
        home: const MyPage(),
      ),
    );
  }
}

Discussion