プログラミング

【Flutter】画面遷移でデータを渡す(クラス間の値受け渡し)

こんにちは ゆゆう(@yuyuublog) です。

Flutterでアプリを作成中です。

はじめて画面遷移でデータを渡す処理を実装しましたので、その方法の共有です。

Flutter勉強中です!

前提

Navigator.pushNamedを使って画面遷移します。

  • Flutter 2.0.6
  • Mac 11.3.1

画面イメージ

↓「+」ボタンクリックで画面遷移

※「次の画面へ渡す値だよ!」という文字列を渡します。

実装コード

最初のページ

import 'package:flutter/material.dart';

import 'next.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
      routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new MainPage(),
        '/next': (BuildContext context) => new NextPage()
      },
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("ここは最初のページです。"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("ここは最初のページです。"),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // 値を渡す
          onPressed: () => Navigator.of(context)
              .pushNamed("/next", arguments: "次の画面へ渡す値だよ!"),
          child: Icon(Icons.add),
        ),
      ),
      routes: <String, WidgetBuilder>{
        '/next': (BuildContext context) => new NextPage(),
      },
    );
  }
}

次のページ

import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    // `ModalRoute.of()`メソッドを使用して引数を取得
    final String args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text("ここは次ページです。"),
      ),
      body: Center(
        child: Text(args),
      ),
    );
  }
}

GitHub

今回のコードはGitHubからもダウンロードできます。

https://github.com/yuyuu-dev/example_transition_value

説明

Navigator.pushNamedで次の画面に値を渡す

argumentsに値を設定することで、好きな値を渡すことができます。

Navigator.of(context).pushNamed("/next", arguments: "次の画面へ渡す値だよ!")

呼び出し先の画面で値を受け取る

ModalRoute.of()メソッドを使用して渡された値を取得できます。

final String args = ModalRoute.of(context).settings.arguments;

受け取った値を表示する

受け取った値をText(args)で表示しています。

home: NextPage(title: 'ここは次ページです。', args: args),
body: Center(
  child: Text(args),
),

まとめ

以上で、画面遷移した際にデータを渡すことができます。

ありがとうございました!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA