【Flutter】ページを戻る時にデータを渡す

に公開

(通常の)ページを戻るやり方

Flutterにおいて、ページ遷移してから前のページに戻るコードは通常以下のようになります。

// ページ遷移する処理
Navigator.push(context, MaterialPageRoute(
    builder: (context) => NextPage()
));
// 前のページに戻る処理
Navigator.pop(context);

データを渡しながらページを戻るやり方

前のページに戻る際に遷移元のページにデータを渡したい時は、以下のようにコードを修正します。

// ページ遷移する処理&戻ってきた後の処理
Navigator.push(context, MaterialPageRoute(
    builder: (context) => NextPage()
)).then((value) {
    // 遷移先のページからのデータがvalueに渡される
    if (value != null) {
        // 遷移先のページからのデータ(value)を使った処理
        ...
    }
})
// データを渡しながら前のページに戻る処理
var value;  // 渡したいデータ
Navigator.pop(context, value);

複数のデータを渡しながらページを戻るやり方

複数のデータを渡したい時は、Mapを使用します。

// ページ遷移する処理&戻ってきた後の処理
Navigator.push(context, MaterialPageRoute(
    builder: (context) => NextPage()
)).then((values) {
    // 遷移先のページからのデータがvaluesに渡される
    if (values != null) {
        // 遷移先のページからのデータ(values)を使った処理
        dynamic value1 = values['key1'];
        dynamic value2 = values['key2'];
        ...
    }
})
// データを渡しながら前のページに戻る処理
Map<String, dynamic> values = {
  'key1': value1,
  'key2': value2,
};
Navigator.pop(context, values);
GitHubで編集を提案

Discussion