【Flutter】StatelessWidgetとStatefulWidgetにデータを渡す

FlutterでStatefulWidgetにデータを渡すのにつまづいたので、
メモがてらに記事に残しておきたいと思います。

ついでに、StatelessWidgetにデータを渡す方法も残しておきます。

StatelessWidget（ステートレスウィジェット）でデータを受け取る

class Stateless extends StatelessWidget {
  @override
  
  final String arguments;
  Stateless(this.arguments); // コンストラクタで引数を受け取る
  Widget build(BuildContext context) {
   return Scaffold(
      appBar: Header(),
      body: Text(arguments); // 変数名をテキストに出力する
    );
  }
}

僕がよくやるミスは Stateless(arguments); という風にthisのつけ忘れです。

エラーも出ないので、なぜかうまくいかない場合は確認してみてください。

StatefulWidget（ステートフルウィジェット）でデータを受け取る

class Stateful extends StatefulWidget {
  String argument;
  Stateful(this.argument);

  @override
  StatefulState createState() => StatefulState();
}

class StatefulState extends State<Stateful> {

  Widget build(BuildContext context) {
   return Scaffold(
      appBar: Header(),
      body: Text(widget.argument); // 引数をテキストに表示する
    );
  }
}

重要ポイントはargumentっていうデータを引数としてもらいたい場合、
ここのコードでいうStatefulウィジェットで引数を受け取ります。

実際の画面をコーディングしているStatefulStateウィジェットではwidget.引数名で出力することができます。

StatefulWidget（ステートフルウィジェット）で、引数の値を変数に格納したい！

class Stateful extends StatefulWidget {
  String argument;
  Stateful(this.argument);

  @override
  StatefulState createState() => StatefulState();
}

class StatefulState extends State<Stateful> {

  TextEditingController _textController = new TextEditingController();

  // 引数の値があれば、_textController.textに代入する
  void initState() {
    super.initState();
    if (widget.argument != null) {
      this._textController.text =  widget.argument;
    }
  }

  Widget build(BuildContext context) {
   return Scaffold(
      appBar: Header(),
      body: TextFormField(
        controller: _textController, // TextFormFieldで_textControllerを指定する
        decoration: InputDecoration(
          border: const OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              const Radius.circular(10.0),
            ),
          ),
        contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
        ),
      ),
    );
  }
}

別ウィジェットにデータを渡す

ルート名(現在「/test」となっている部分)は適宜変更してください。

Navigator.push(
  context,
  MaterialPageRoute(
    settings: const RouteSettings(name: "/test"),
    builder: (BuildContext contect) =>
      State("testtesttesttesttesttest");
    ),
);

終わりに

以上です。

記事としてはあんまり、まとまってなくて申し訳ないですが、
個人的につまづいたところをまとめてみました。

参考になれば幸いです。