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

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

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

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

Dart

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

Q&A

解決済

【flutter】入力した値を次の画面へ表示させたい

narururu
narururu

総合スコア156

Flutter

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

Dart

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

1回答

0グッド

0クリップ

1376閲覧

投稿2021/01/23 08:23

編集2021/01/23 14:46

解決したい課題

テキストフィールドで入力した値を次の画面に表示させたい。

現状

![イメージ説明
「確認画面へ」をタップすると下記エラーが表示される。

Navigator operation requested with a context that does not include a Navigator.

実行ボタンを押すと下記エラーが表示される。

lib/main.dart:28:21: Error: The method 'setState' isn't defined for the class 'MyApp'. - 'MyApp' is from 'package:test20210123/main.dart' ('lib/main.dart'). Try correcting the name to the name of an existing method, or defining a method named 'setState'. setState((){ ^^^^^^^^

コード

//入力画面 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { String name; @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Scaffold( appBar: AppBar( title: Text('入力画面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( onChanged: (value) { setState((){ name = value; }); }, decoration: InputDecoration( hintText: 'ここに入力した値を次の画面に渡したい' ), ), TextField( decoration: InputDecoration( hintText: 'ここに入力した値を次の画面に渡したい' ), ), RaisedButton( child: Text('確認画面へ'), onPressed: (){ Navigator.push( context, MaterialPageRoute(builder: (context) => NextPage(name: name)), ); } ), ], ), ), ) ); } } //確認画面 class NextPage extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: NextPage2(), ); } } class NextPage2 extends StatelessWidget{ NextPage2({this.name}); final String name; @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('確認画面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(name), Text(name), ], ), ), ); } }

以上、どなたか教えてくださると助かります。
お願いいたします。

追記

修正後のコード

//入力画面 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { String name; @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Scaffold( appBar: AppBar( title: Text('入力画面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( onChanged: (value) { setState((){ name = value; }); }, decoration: InputDecoration( hintText: 'ここに入力した値を次の画面に渡したい' ), ), TextField( decoration: InputDecoration( hintText: 'ここに入力した値を次の画面に渡したい' ), ), RaisedButton( child: Text('確認画面へ'), onPressed: (){ Navigator.push( context, MaterialPageRoute(builder: (context) => Scaffold( appBar: AppBar( title: Text('確認画面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(name), Text(name), ], ), ), ), ), ); } ), ], ), ), ) ); } } //確認画面 class NextPage extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: NextPage2(), ); } } class NextPage2 extends StatelessWidget{ NextPage2({this.name}); final String name; @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('確認画面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(name), Text(name), ], ), ), ); } }

エラー

lib/main.dart:28:21: Error: The method 'setState' isn't defined for the class 'MyApp'. - 'MyApp' is from 'package:test20210124/main.dart' ('lib/main.dart'). Try correcting the name to the name of an existing method, or defining a method named 'setState'. setState((){ ^^^^^^^^

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

Navigator.pushに渡しているcontextがMaterialAppが作られる前のものなのでNavigatorが含まれていません。MaterialAppが内部でNavigatorを作っています。

解決策1(非推奨、一時凌ぎ、未検証)
RaisedButton丸ごとBuilderで囲む

dart

1Builder(builder: (context) => RaisedButton(....) )

解決策2(推奨)
MaterialAppのhomeの中身を丸ごと別のStatelessWidgetに移動(整理)させてください。

dart

1 2return MaterialApp( 3 home: HomeWidget(), 4 ... 5) 6 7class HomeWidget extends StatelessWidget { 8 9 Widget build(BuildContext context) => /* ここに以前のhomeの中身をコピペ */ 10}

追記(検証済み)

dart

1//入力画面 2import 'package:flutter/material.dart'; 3 4void main() { 5 runApp(MyApp()); 6} 7 8class MyApp extends StatelessWidget { 9 10 Widget build(BuildContext context) { 11 return MaterialApp( 12 theme: ThemeData( 13 primarySwatch: Colors.blue, 14 visualDensity: VisualDensity.adaptivePlatformDensity, 15 ), 16 home: HomePage(), 17 ); 18 } 19} 20 21class HomePage extends StatefulWidget { 22 23 createState() => HomePageState(); 24} 25 26class HomePageState extends State<HomePage> { 27 // 28 String name; 29 30 31 Widget build(BuildContext context) => Scaffold( 32 appBar: AppBar( 33 title: Text('入力画面'), 34 ), 35 body: Center( 36 child: Column( 37 mainAxisAlignment: MainAxisAlignment.center, 38 children: [ 39 TextField( 40 onChanged: (value) { 41 setState(() { 42 name = value; 43 }); 44 }, 45 decoration: InputDecoration(hintText: 'ここに入力した値を次の画面に渡したい'), 46 ), 47 RaisedButton( 48 child: Text('確認画面へ'), 49 onPressed: () { 50 Navigator.push( 51 context, 52 MaterialPageRoute(builder: (context) => NextPage(name: name)), 53 ); 54 }), 55 ], 56 ), 57 ), 58 ); 59} 60 61class NextPage extends StatelessWidget { 62 // 63 final String name; 64 65 NextPage({ 66 this.name, 67 }); 68 69 70 Widget build(BuildContext context) => Scaffold( 71 appBar: AppBar( 72 title: Text('確認画面'), 73 ), 74 body: Center( 75 child: Column( 76 mainAxisAlignment: MainAxisAlignment.center, 77 children: [ 78 Text(name), 79 ], 80 ), 81 ), 82 ); 83} 84

投稿2021/01/23 13:58

編集2021/01/23 15:33
hiroshihorie

総合スコア191

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

narururu

2021/01/23 14:28

ご回答いただきありがとうございます!hiroshihorieさん☺ 推奨方法を試したいと思っていますが、1つ目のクラスのMyAppのhome: Scaffoldを下記の場所に移動するということでしょうか? Widget build(BuildContext context) => (ここ) そうしますと、どこまでの範囲を選択すればよろしいでしょうか。 イマイチ理解できず、、申し訳ございません。
hiroshihorie

2021/01/23 14:32

そうですScaffold(....)全部ですね Widget build(BuildContext context) => Scaffold( ..... ) という感じになります。
narururu

2021/01/23 14:47

修正し再度実行してみました。 質問欄に「追記」という形で修正後のコードとエラーを記載しました。 私が修正した内容は合っていますでしょうか。。自信ないです。 ご確認お願いいたします。
narururu

2021/01/23 15:03 編集

コードを実行してもエラーのため、画面が表示されない状態です。 お手すきの際に、再度アドバイスいただけますと幸いです。
hiroshihorie

2021/01/23 15:34

動作するコードを丸ごと追記したので勉強してみてください。
narururu

2021/01/24 03:10

コードまで書いてくださり本当にありがとうございます! 私全然違うことしてましたね。すいません。 これをもとに勉強させていただきます。 とても助かりました!
hiroshihorie

2021/01/24 06:51

個人的にはStatefulWidgetでsetStateするよりは、ProviderやRiverpodで状態管理するのがおすすめです。ある程度慣れたら検索してみてください。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Flutter

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

Dart

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