質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1747閲覧

riverpodのnavigatorでの値の渡し方

copp

総合スコア11

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2020/08/03 05:37

前提・実現したいこと

Flutterのriverpodの勉強の為、HeavenOSKさんのriverpod_sample(https://github.com/HeavenOSK/riverpod_sample)を参考にし
navigatorのサンプルを作成してみました。
ThirdPageに移動する際に値を持っていくようにしたのですが、その値をFloatingActionButtonで更新(+1)しても画面の更新(描画)はされませんでした。
カウントアップした際に画面も更新させるにはどうすればよろしいでしょうか?

お手数ではございますが御教唆お願いいたします

発生している問題・エラーメッセージ

ThirdPageでFloatingActionButtonを行ってもCounterの描画が更新されない

該当のソースコード

dart

1//main.dart 2import 'package:flutter/foundation.dart'; 3import 'package:flutter/material.dart'; 4import 'package:flutter_hooks/flutter_hooks.dart'; 5import 'package:functional_widget_annotation/functional_widget_annotation.dart'; 6import 'package:hooks_riverpod/hooks_riverpod.dart'; 7import 'package:state_notifier/state_notifier.dart'; 8 9part 'main.g.dart'; 10 11class Counter extends StateNotifier<int> { 12 Counter() : super(0); 13 14 void increment() => state++; 15} 16 17final thirdController = Provider.autoDispose( 18 (ref) { 19 final controller = ThirdPage(ref); 20 ref.onDispose(() => print('dispose ThirdPage()')); 21 return controller; 22 }, 23); 24 25final counterProvider = StateNotifierProvider.autoDispose<Counter>((ref) { 26 ref.onDispose(() { 27 print('disposed'); 28 }); 29 return Counter(); 30}); 31 32void main() { 33 runApp( 34 ProviderScope( 35 child: MyApp(), 36 ), 37 ); 38} 39 40 41Widget myApp() { 42 return MaterialApp( 43 routes: { 44 '/': (_) => FirstPage(), 45 '/SecondPage': (_) => SecondPage(), 46 }, 47 ); 48} 49 50 51Widget firstPage() { 52 final context = useContext(); 53 54 return Scaffold( 55 body: Center( 56 child: Column( 57 mainAxisAlignment: MainAxisAlignment.center, 58 children: <Widget>[ 59 RaisedButton( 60 onPressed: () { 61 Navigator.of(context).pushNamed('/SecondPage'); 62 }, 63 child: Text('Next Page'), 64 ), 65 ], 66 ), 67 ), 68 ); 69} 70 71 72Widget secondPage() { 73 final counter = useProvider(counterProvider); 74 final context = useContext(); 75 final _thirdController = useProvider(thirdController); 76 77 return Scaffold( 78 appBar: AppBar(title: Text('Second Page')), 79 body: Center( 80 child: Column( 81 mainAxisAlignment: MainAxisAlignment.center, 82 children: <Widget>[ 83 Count(), 84 RaisedButton( 85 onPressed: () { 86 showDialog( 87 context: context, 88 builder: (_) { 89 return Dialog(); 90 }); 91 }, 92 child: Text('Dialog'), 93 ), 94 RaisedButton( 95 onPressed: () { 96 return Navigator.of(context).push<void>( 97 MaterialPageRoute( 98 builder: (context) => _thirdController, 99 ), 100 ); 101 }, 102 child: Text('ThirdPage'), 103 ), 104 ], 105 ), 106 ), 107 floatingActionButton: FloatingActionButton( 108 onPressed: () { 109 counter.increment(); 110 }, 111 child: Icon(Icons.add), 112 ), 113 ); 114} 115 116 117Widget thirdPage(ProviderReference ref) { 118 final counter = ref.read(counterProvider); 119 // エラーになってしまいましたが、useProviderと同じく counterState = ref.read(counterProvider.state); みたい感じで直接stateを取ってくればいけるかなと思っておりました 120 121 return Scaffold( 122 appBar: AppBar(title: Text('Third Page')), 123 body: Center( 124 child: Text(counter.state.toString()), 125 ), 126 floatingActionButton: FloatingActionButton( 127 onPressed: () { 128 counter.increment(); 129 }, 130 child: Icon(Icons.add), 131 ), 132 ); 133} 134 135 136Widget count() { 137 final count = useProvider(counterProvider.state); 138 139 return Text(count.toString()); 140} 141 142 143Widget dialog() { 144 final context = useContext(); 145 final count = useProvider(counterProvider.state); 146 final counter = useProvider(counterProvider); 147 return AlertDialog( 148 content: IntrinsicHeight( 149 child: Padding( 150 padding: EdgeInsets.symmetric(vertical: 80), 151 child: Center(child: Text(count.toString())), 152 ), 153 ), 154 actions: <Widget>[ 155 RaisedButton( 156 onPressed: () { 157 Navigator.of(context).pop(); 158 }, 159 child: Text('閉じる'), 160 ), 161 RaisedButton( 162 onPressed: () { 163 counter.increment(); 164 }, 165 child: Icon(Icons.add), 166 ), 167 ], 168 ); 169}

dart

1#pubspec.yaml 2name: riverpod_navigator 3description: riverpod navigator 4 5publish_to: 'none' # Remove this line if you wish to publish to pub.dev 6 7version: 1.0.0+1 8 9environment: 10 sdk: ">=2.7.0 <3.0.0" 11 flutter: ">= 1.17.0" 12dependencies: 13 flutter: 14 sdk: flutter 15 flutter_hooks: 16 hooks_riverpod: 17 state_notifier: 18 functional_widget_annotation: 19builders: 20 functional_widget: 21dev_dependencies: 22 flutter_test: 23 sdk: flutter 24 build_runner: 25 functional_widget: 26flutter: 27 uses-material-design: true

dart

1#build.yaml 2targets: 3 $default: 4 builders: 5 functional_widget: 6 options: 7 debugFillProperties: true 8 widgetType: stateless 9 equality: equal

dart

1//main.g.dart 2ターミナルで flutter packages pub run build_runner build watch を実行すると作成されます

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

Flutter 1.17.5 • channel stable
Dart Dart 2.8.4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

riverpodはグローバル変数なので、あまりnavigatorで値を渡す必要がなかったです
無駄な質問をしてすみませんでした

一応、値の渡し方はわかりましたので記載しておきます
riverpodのMarvelサンプルのようにすると値を渡すことはできるようでした。

dart

1// main.dart(Marvel) 2 result = ProviderScope( 3 overrides: [ 4 selectedCharacterId.overrideWithValue(split.last), 5 ], 6 child: const CharacterView(),

dart

1// character_detail.dart(Marvel) 2final selectedCharacterId = ScopedProvider<String>(null); 3              ・ 4              ・ 5class CharacterView extends HookWidget { 6 const CharacterView({Key key}) : super(key: key); 7 8 9 Widget build(BuildContext context) { 10 final id = useProvider(selectedCharacterId); 11              ・ 12              ・ 13

投稿2020/11/12 08:09

copp

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問