Flutterで画面遷移時にパラメータを渡す方法

Flutterで画面遷移時のパラメータを渡す方法を紹介します。
この記事の例では、ユーザーが入力した氏名を初めの画面から次の画面へと渡す方法を示します。

パラメータを渡す画面遷移の実装

それでは、Flutterで遷移先画面にパラメータを渡す、遷移元と遷移先画面の実装方法を見ていきます。

遷移元画面（FirstScreen）

遷移元の画面では、ユーザーが氏名を入力できるテキストボックスと、その氏名を次の画面に送るボタンを配置します。

import 'package:flutter/material.dart';
import 'second_screen.dart';

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('遷移元画面'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: '氏名を入力',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          RaisedButton(
            child: Text('次画面へ'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondScreen(name: _controller.text),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

遷移先画面（SecondScreen）

遷移先の画面では、遷移元から渡された氏名を表示します。

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  final String name;

  SecondScreen({required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('遷移先画面'),
      ),
      body: Center(
        child: Text(
          'こんにちは、$nameさん',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

解説

1. 遷移元画面：ユーザーがテキストボックスに氏名を入力します。ボタンが押されると、Navigator.push を使用して、氏名を SecondScreen のコンストラクタに渡しつつ遷移先画面に遷移します。
2. 遷移先画面：コンストラクタを通じて受け取った氏名を表示します。

このサンプルでは、画面間でデータを渡す基本的な方法を示していますが、実際のアプリケーションでは更に複雑なデータや、より多くのデータを渡す場面があります。その場合は、適宜データの構造を考慮して設計しましょう。