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

Question

解決したい課題

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

現状

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

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

Answer 1

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

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

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

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

return MaterialApp(
  home: HomeWidget(),
  ...
)

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => /* ここに以前のhomeの中身をコピペ */
}

追記（検証済み）

//入力画面
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  //
  String name;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('入力画面'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                onChanged: (value) {
                  setState(() {
                    name = value;
                  });
                },
                decoration: InputDecoration(hintText: 'ここに入力した値を次の画面に渡したい'),
              ),
              RaisedButton(
                  child: Text('確認画面へ'),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => NextPage(name: name)),
                    );
                  }),
            ],
          ),
        ),
      );
}

class NextPage extends StatelessWidget {
  //
  final String name;

  NextPage({
    this.name,
  });

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('確認画面'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(name),
            ],
          ),
        ),
      );
}

Comments

[narururu]

ご回答いただきありがとうございます！hiroshihorieさん☺

推奨方法を試したいと思っていますが、1つ目のクラスのMyAppのhome: Scaffoldを下記の場所に移動するということでしょうか？
Widget build(BuildContext context) => （ここ）

そうしますと、どこまでの範囲を選択すればよろしいでしょうか。
イマイチ理解できず、、申し訳ございません。

[hiroshihorie]

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

[narururu]

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

[narururu]

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

[hiroshihorie]

あ、setStateしたいんですね。その場合はStatefulWidgetにする必要があります。https://teratail.com/questions/317987#reply-442561 こっちと同じ感じですね。ちょっとコード書いてみます。

[hiroshihorie]

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

[narururu]

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

[hiroshihorie]

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