NEW ARTICLE
Google Colaboratory コマンドパレットを開くショートカットキー
  1. HOME
  2. flutter
  3. Flutter 画面遷移時に値を渡す

Flutter 画面遷移時に値を渡す

Flutter 画面遷移時に値を渡す

Flutterで、画面遷移時に値を渡す手順を記述してます。ここでは「page1」と画面を作成して、そこにボタンクリックで遷移した際に値を渡してます。実際に実行した結果の動画もあります。

目次

環境

  • OS  windows11 pro 64bit
  • Flutter 3.3.1

画面遷移時に値を渡す

まずは、任意の名前で「Dart」ファイルを以下のコードで画面を作成します。
このコードから遷移して、値を渡します。
※ここでは「page_one.dart」という名前で作成してます。変数「name」を使用して値を受け取ります。

import 'package:flutter/material.dart';

class pageOne extends StatelessWidget {
  pageOne(this.name);
  String name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('page1'),
      ),
      body: Container(
        child: Text(name),
      ),
    );
  }
}

ここでは、ボタンクリックで遷移させるので、次に遷移させる側に以下のコードを追加します。
「pageOne」に引数に値を指定することで、値を渡すことが可能です。

import 'page_one.dart';

      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => pageOne('hello')),
            );
          },
          child: Text(
            "Button",
          ),
        ),
      ),

実行結果をみると画面遷移して値が渡されていることが確認できます。