【Flutter】画面遷移時に値を渡し受け取る方法(StatelessWidget、StatefullWidget)の完全ガイド！

2024年2月15日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

StatelessWidgetへのデータの渡し方と受け取り方
StatefulWidgetへのデータの渡し方と受け取り方

開発環境

Dart 3.0.0
Flutter 3.10.0

StatelessWidgetへのデータの渡し方と受け取り方

StatelessWidgetは、不変の（変更不可能な）ウィジェットを作成するために使用されます。画面遷移時に値を渡すことは、アプリケーション内の異なるページ間で情報を共有する基本的な方法の一つです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画面１'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('次の画面へ'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailsPage(companyName: '株式会社メモリアインク'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String companyName;

  DetailsPage({required this.companyName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画面２'),
      ),
      body: Center(
        child: Text('$companyName'),
      ),
    );
  }
}

解説

Navigator.pushメソッドを使用して、新しい画面に遷移します。
MaterialPageRouteのbuilderプロパティに、遷移先のDetailsPageウィジェットと、渡す値（この例ではcompanyName）を指定します。
DetailsPageウィジェットは、コンストラクタを通して渡された値を表示します。

動作確認

いちの

それでは実際の動作を見てみましょ〜

【Flutter】画面遷移時に値を渡し受け取る方法(StatelessWidget、StatefullWidget)の完全ガイド！

StatefulWidgetへのデータの渡し方と受け取り方

StatefulWidgetは、動的な（変更可能な）ウィジェットを作成するために使用されます。StatefulWidgetにデータを渡す方法も、基本的にはStatelessWidgetと同様ですが、StatefulWidgetは状態を保持することができるため、より複雑なロジックを実装することが可能です。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画面１'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('次の画面へ'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailsPage(companyName: '株式会社メモリアインク'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailsPage extends StatefulWidget {
  final String companyName;

  DetailsPage({required this.companyName});

  @override
  _DetailsPageState createState() => _DetailsPageState();
}

class _DetailsPageState extends State<DetailsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画面２'),
      ),
      body: Center(
        child: Text('${widget.companyName}'),
      ),
    );
  }
}

解説

DetailsPageはStatefulWidgetであり、渡された値はwidget.companyNameを通じてアクセス可能です。
StatefulWidget内での値の管理と更新が可能になります。

ウィジェットについてもっと知りたいという方は、以下個人的に自信作の記事をぜひ！

動作確認

いちの

それでは実際の動作を見てみましょ〜

まとめ

この記事では、Flutter を使用して、StatelessWidgetとStatefulWidgetにデータを渡し受け取る方法を詳細に解説しました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。