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

解決したい課題

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

現状

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

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((){
                    ^^^^^^^^

行動規範の内容に同意します

回答1件

ベストアンサー

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

解決策１（非推奨、一時凌ぎ、未検証）
RaisedButton丸ごとBuilderで囲む

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

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

dart
1
2return MaterialApp(
3  home: HomeWidget(),
4  ...
5)
6
7class HomeWidget extends StatelessWidget {
8  @override
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  @override
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  @override
23  createState() => HomePageState();
24}
25
26class HomePageState extends State<HomePage> {
27  //
28  String name;
29
30  @override
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  @override
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

総合スコア192

narururu

2021/01/23 14:28

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