[Flutter] ナビゲーションでパラメータを渡す

2021-07-29 hit count image

Flutterでナビゲーションを使って画面を移動する時、パラメータを渡す方法について説明します。

概要

Flutterでナビゲーションを使う時、次の画面にパラメータを渡す必要がある時があります。この時、Flutterで次の画面にパラメータを渡す方法について説明します。

このブログで紹介するソースコードは下記のリンクで確認できます。

プロジェクトの準備

例題を見ながら、ナビゲーションを使って画面を移動する時、パラメーがを渡す方法について見てみましょう。次のコマンドを使ってプロジェクトを準備します。

flutter create parameters

ナビゲーションや画面の構成

ナビゲーションと画面を構成するため、まず、lib/main.dartファイルを開いて下記のように修正します。

import 'package:flutter/material.dart';

import 'package:parameters/home.dart';
import 'package:parameters/second.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: 'home',
      routes: {
        'home': (context) => const Home(),
        'second': (context) => const Second(),
      },
    );
  }
}

画面を担当するウィジェットであるhome.dartsecond.dartを後で作る予定です。次のように後で作る画面ウィジェットを持って来て、

...
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
...

次のようにナビゲーションを構成します。

...
initialRoute: 'home',
routes: {
  'home': (context) => const Home(),
  'second': (context) => const Second(),
},
...

パラメータを渡す

最初の画面であるhome画面ウィジェットを作るためlib/home.dartファイルを作って次のように修正します。

import 'package:flutter/material.dart';
import 'package:parameters/second.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HOME'),
      ),
      body: Center(
        child: TextButton(
          child: Text('Go to Second screen'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              'second',
              arguments: SecondScreenArguments(number: 5),
            );
          },
        ),
      ),
    );
  }
}

ここで次の画面であるsecondに移動する部分を詳しく見ると、次のようなコードを使ってることが分かります。

...
Navigator.pushNamed(
  context,
  'second',
  arguments: SecondScreenArguments(number: 5),
);
...

SecondScreenArgumentsは後で作るsecond.dartファイルに次のように宣言されるクラスです。

...
class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}
...

このように画面間渡すパラメータのタイプを定義してNavigator.pushNamedargumentsで渡します。

パラメータを受ける

次はhome画面ウィジェットからパラメータを受けて画面に表示するsecond画面ウィジェットを作ってみましょう。lib/second.dartファイルを作って次のように修正します。

import 'package:flutter/material.dart';

class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}

class Second extends StatelessWidget {
  const Second({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text('SECOND'),
      ),
      body: Center(
        child: Text('${args.number}'),
      ),
    );
  }
}

上でもみましたが、まず、パラメータのタイプを定義するためSecondScreenArgumentsクラスを宣言しました。

...
class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}
...

このように宣言したタイプを持って次のようにModalRoute.of(context)!.settings.argumentsを使ってパラメータを受けます。

...
final args = ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
...

最後にこのようにこのように受けたパラメータで使うデータをargs.numberのようにアクセスして使います。

...
child: Text('${args.number}'),
...

完了

これでFlutterでナビゲーションを使って画面を移動する時、画面間データを渡す方法についてみてみました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts