FlutterのProviderで複数の値を持つクラスを管理したい。

実現したいこと

質問

Flutterでアプリケーションを作っています。
複数の値を纏めたいので、classでまとめていたのですが、値を更新したときに、再描画が行われません。
また、ホットリロードをすると、値が再描画されるので、何か再描画される条件みたいなものが足りていないのかなと思っています。
自作のclassはProviderでは扱えないのでしょうか?それかコードが悪いのかどっちなのでしょうか?
どなたか御教授お願いします。

該当のソースコード

Dart

1import 'package:flutter/material.dart';2import 'package:hooks_riverpod/hooks_riverpod.dart';3 4class xyval {5 int x = 0;6 int y = 0;7}8 9final xypro = StateProvider((ref) => xyval());10 11void main() {12 runApp(ProviderScope(child: const MyApp()));13}14 15class MyApp extends HookConsumerWidget {16 const MyApp({super.key});17 18 // This widget is the root of your application.19 20 Widget build(BuildContext context, WidgetRef ref) {21 return MaterialApp(22 title: 'Flutter Demo',23 theme: ThemeData(24 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),25 useMaterial3: true,26 ),27 home: MyHomePage(),28 );29 }30}31 32class MyHomePage extends HookConsumerWidget {33 34 Widget build(BuildContext context, WidgetRef ref) {35 // This method is rerun every time setState is called, for instance as done36 // by the _incrementCounter method above.37 //38 // The Flutter framework has been optimized to make rerunning build methods39 // fast, so that you can just rebuild anything that needs updating rather40 // than having to individually change instances of widgets.41 final xyval val = ref.watch(xypro);42 return Scaffold(43 appBar: AppBar(44 title: const Text("PROVIDERTEST"),45 ),46 body: Text("値" + val.x.toString() + val.y.toString(),47 textAlign: TextAlign.left, style: const TextStyle(fontSize: 30)),48 floatingActionButton: FloatingActionButton.extended(49 onPressed: () {50 ref.read(xypro.notifier).state.x++;51 ref.read(xypro.notifier).state.y += 2;52 },53 icon: const Icon(Icons.arrow_right_alt_sharp),54 label: const Text("加算")));55 }56}57 58

試したこと

Providerをxとyに分けると、ボタンを押すと再描画されました。

dart

1import 'package:flutter/material.dart';2import 'package:hooks_riverpod/hooks_riverpod.dart';3 4class xyval {5 int x = 0;6 int y = 0;7}8 9final xpro = StateProvider((ref) => 0);10final ypro = StateProvider((ref) => 0);11 12void main() {13 runApp(ProviderScope(child: const MyApp()));14}15 16class MyApp extends HookConsumerWidget {17 const MyApp({super.key});18 19 // This widget is the root of your application.20 21 Widget build(BuildContext context, WidgetRef ref) {22 return MaterialApp(23 title: 'Flutter Demo',24 theme: ThemeData(25 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),26 useMaterial3: true,27 ),28 home: MyHomePage(),29 );30 }31}32 33class MyHomePage extends HookConsumerWidget {34 35 Widget build(BuildContext context, WidgetRef ref) {36 // This method is rerun every time setState is called, for instance as done37 // by the _incrementCounter method above.38 //39 // The Flutter framework has been optimized to make rerunning build methods40 // fast, so that you can just rebuild anything that needs updating rather41 // than having to individually change instances of widgets.42 final int x = ref.watch(xpro);43 final int y = ref.watch(ypro);44 return Scaffold(45 appBar: AppBar(46 title: const Text("PROVIDERTEST"),47 ),48 body: Text("値" + x.toString() + y.toString(),49 textAlign: TextAlign.left, style: const TextStyle(fontSize: 30)),50 floatingActionButton: FloatingActionButton.extended(51 onPressed: () {52 ref.read(xpro.notifier).state++;53 ref.read(ypro.notifier).state += 2;54 },55 icon: const Icon(Icons.arrow_right_alt_sharp),56 label: const Text("加算")));57 }58}59

それぞれの変数を別々にwatchしても、再描画はされませんでした。(41,42行目)

Dart

1import 'package:flutter/material.dart';2import 'package:hooks_riverpod/hooks_riverpod.dart';3 4class xyval {5 int x = 0;6 int y = 0;7}8 9final xypro = StateProvider((ref) => xyval());10 11void main() {12 runApp(ProviderScope(child: const MyApp()));13}14 15class MyApp extends HookConsumerWidget {16 const MyApp({super.key});17 18 // This widget is the root of your application.19 20 Widget build(BuildContext context, WidgetRef ref) {21 return MaterialApp(22 title: 'Flutter Demo',23 theme: ThemeData(24 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),25 useMaterial3: true,26 ),27 home: MyHomePage(),28 );29 }30}31 32class MyHomePage extends HookConsumerWidget {33 34 Widget build(BuildContext context, WidgetRef ref) {35 // This method is rerun every time setState is called, for instance as done36 // by the _incrementCounter method above.37 //38 // The Flutter framework has been optimized to make rerunning build methods39 // fast, so that you can just rebuild anything that needs updating rather40 // than having to individually change instances of widgets.41 final int valx = ref.watch(xypro).x;42 final int valy = ref.watch(xypro).y;43 return Scaffold(44 appBar: AppBar(45 title: const Text("PROVIDERTEST"),46 ),47 body: Text("値" + valx.toString() + valy.toString(),48 textAlign: TextAlign.left, style: const TextStyle(fontSize: 30)),49 floatingActionButton: FloatingActionButton.extended(50 onPressed: () {51 ref.read(xypro.notifier).state.x++;52 ref.read(xypro.notifier).state.y += 2;53 },54 icon: const Icon(Icons.arrow_right_alt_sharp),55 label: const Text("加算")));56 }57}58

補足情報(FW/ツールのバージョンなど)

pubspec.yaml

yaml

1name: mezamasi_fa 2description: A new Flutter project. 3publish_to: 'none' 4version: 1.0.0+1 5 6environment:7 sdk: '>=3.0.6 <4.0.0'8dependencies:9 flutter:10 sdk: flutter 11 12 hooks_riverpod: ^1.0.0 13 flutter_hooks : ^0.18.0 14 rational : ^2.2.2 15 16 17 cupertino_icons: ^1.0.2 18 19dev_dependencies:20 flutter_test:21 sdk: flutter 22 23 flutter_lints: ^2.0.0 24 uses-material-design: true25 26

コメントを投稿

0 コメント