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

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

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

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

Dart

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

Q&A

解決済

1回答

3976閲覧

state_notifierでのcontext範囲外処理について

copp

総合スコア11

Flutter

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

Dart

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

0グッド

0クリップ

投稿2020/06/06 02:14

前提・実現したいこと

Flutterのstate_notifierの勉強の為、demoを作成してみたのですが、
app_page.dartのfloatingActionButton部分のように
contextの範囲外(() => {})になってしまう処理はどのように記載すればよろしいのでしょうか?

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

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

Tried to use `context.select` outside of the `build` method of a widget. Any usage other than inside the `build` method of a widget are not supported. 'package:provider/src/inherited_provider.dart': Failed assertion: line 215 pos 12: 'widget is LayoutBuilder || debugDoingBuild'

該当のソースコード

dart

11.main.dart 2 3import 'package:checkstatenotifer/app_page.dart'; 4import 'package:checkstatenotifer/app_state.dart'; 5import 'package:flutter/material.dart'; 6import 'package:flutter_state_notifier/flutter_state_notifier.dart'; 7import 'package:provider/provider.dart'; 8 9void main() { 10 runApp( 11 MultiProvider( 12 providers: [ 13 StateNotifierProvider<AppController, AppState>( 14 create: (_) => AppController(), 15 ), 16 ], 17 child: MyApp(), 18 ), 19 ); 20} 21 222.app_state.dart 23 24import 'package:flutter/foundation.dart'; 25import 'package:flutter/material.dart'; 26import 'package:freezed_annotation/freezed_annotation.dart'; 27import 'package:state_notifier/state_notifier.dart'; 28 29part 'app_state.freezed.dart'; 30 31 32abstract class AppState with _$AppState { 33 const factory AppState({ 34 (0) int counter, 35 (false) bool color, 36 String text, 37 }) = _AppState; 38} 39 40class AppController extends StateNotifier<AppState> { 41 AppController() : super(const AppState()); 42 43 void switchColor(bool value) { 44 state = state.copyWith(color: value); 45 } 46 47 Color getColor() { 48 return state.color ? Colors.red : Colors.blue; 49 } 50 51 void setText(String value) { 52 state = state.copyWith(text: value); 53 } 54 55 void increment() { 56 state = state.copyWith(counter: state.counter + 1); 57 } 58} 59 603. app_page.dart 61 62import 'package:checkstatenotifer/app_state.dart'; 63import 'package:flutter/material.dart'; 64import 'package:provider/provider.dart'; 65 66class HomePage extends StatelessWidget { 67 const HomePage({Key key}) : super(key: key); 68 69 70 Widget build(BuildContext context) { 71 return Scaffold( 72 appBar: AppBar( 73 title: const Text('State_Notifier Demo'), 74 ), 75 body: Column( 76 mainAxisAlignment: MainAxisAlignment.center, 77 children: [ 78 Center( 79 child: Padding( 80 padding: const EdgeInsets.all(10), 81 child: Column( 82 mainAxisAlignment: MainAxisAlignment.center, 83 children: <Widget>[ 84 TextField( 85 enabled: true, 86 maxLength: 30, 87 onChanged: 88 context.select((AppController value) => value.setText), 89 decoration: InputDecoration( 90 hintText: 'please input your name', 91 labelText: 'name', 92 border: OutlineInputBorder( 93 borderRadius: BorderRadius.circular(15), 94 ), 95 ), 96 ), 97 SwitchListTile( 98 title: const Text('color switch'), 99 value: context.select((AppState value) => value.color), 100 onChanged: context 101 .select((AppController value) => value.switchColor)), 102 Text( 103 context.select((AppState value) => value.text) ?? '', 104 style: TextStyle( 105 color: context 106 .select((AppController value) => value.getColor())), 107 ), 108 DisplayCounter(), 109 ], 110 ), 111 ), 112 ), 113 ], 114 ), 115 floatingActionButton: FloatingActionButton( 116// こちらは OK 117 onPressed: context.select((AppController value) => value.increment), 118// onPressed: () => { 119//// こちらは NG (error: Any usage other than inside the `build` method of a widget are not supported.) 120// if (context.select((AppState value) => value.counter) < 5) 121// { 122// context.select((AppController value) => value.increment), 123// } 124// }, 125 child: const Icon(Icons.add, color: Colors.white), 126 ), 127 ); 128 } 129} 130 131class DisplayCounter extends StatelessWidget { 132 133 Widget build(BuildContext context) { 134 return Text( 135 context.select((AppState value) => value.counter).toString(), 136 style: Theme.of(context).textTheme.headline4, 137 ); 138 } 139} 140 141class MyApp extends StatelessWidget { 142 143 Widget build(BuildContext context) { 144 return MaterialApp( 145 title: 'State_Notifier Demo', 146 theme: ThemeData( 147 primarySwatch: Colors.blue, 148 ), 149 home: const HomePage(), 150 ); 151 } 152} 153 1544. app_state.freezed.dart 155ターミナルでflutter packages pub run build_runner buildを実行すると作成されます 156 1575. pubspe.yaml 158 159name: checkstatenotifer 160description: check_state_notifier 161 162publish_to: 'none' # Remove this line if you wish to publish to pub.dev 163 164version: 1.0.0+1 165 166environment: 167 sdk: ">=2.7.0 <3.0.0" 168 169dependencies: 170 flutter: 171 sdk: flutter 172 freezed_annotation: 173 flutter_state_notifier: ^0.4.2 174 provider: ^4.1.3 175 176dev_dependencies: 177 flutter_test: 178 sdk: flutter 179 build_runner: 180 freezed: 181 pedantic_mono: any 182 183flutter: 184 uses-material-design: true 185

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

Flutter 1.19.0-0.0.pre • channel dev
Dart 2.9.0 (build 2.9.0-5.0.dev 4da5b40fb6)

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

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

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

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

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

guest

回答1

0

自己解決

下記のような設定をすることでエラーを回避することができました。

dart

1app_page.dart 2                 ・ 3                 ・ 4 Widget build(BuildContext context) { 5 final appState = Provider.of<AppState>(context); 6 final appController = Provider.of<AppController>(context); 7 8 return Scaffold( 9                 ・ 10                 ・ 11 floatingActionButton: FloatingActionButton( 12 onPressed: () => { 13 if (appState.counter < 100) 14 { 15 appController.increment(), 16 } 17 }, 18 child: const Icon(Icons.add, color: Colors.white), 19 ), 20

投稿2020/06/08 12:47

copp

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問