Flutterでの値の受け渡しについて

Question

実現したいこと

• Flutterで画像をタップした際に、拡大画像が表示されるプログラムを書いており、すでに外側は構築できたが、外側に関しては、もうだいぶできているので中身の部分に関しての実装のイメージが湧かないのでアドバイスいただければと思っています。

前提

現在、Flutterでアプリを趣味で開発しており、投稿された画像をタップすると拡大画像として画面に表示されるというもの(Twitterみたいなやつ）を作っていて外側はすでに作り終えた状況です。
Flutterでのデータ、値の受け渡しについて以下のページがヒットし、それに準ずる形でこれから値の受け渡しに関して書いていこうと思っています。ですが、まだまだ経験が浅いこともありどのような形で書いていけば良いかよく分かり切っていない状況です。実装のイメージも湧いていない状況なのでアドバイスいただきたいです。長くなるので呼び出し元のコードはコメント欄に記載します。

発生している問題・エラーメッセージ

該当のソースコード

import 'package:chat_app/pages/home_page.dart';
import 'package:flutter/material.dart';

class ImageZoomPage extends StatefulWidget {
  const ImageZoomPage({super.key});

  @override
  State<ImageZoomPage> createState() => _ImageZoomPageState();
}

class _ImageZoomPageState extends State<ImageZoomPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Container(
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
          ),
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            child: IconButton(
              icon: const Icon(Icons.clear),
              onPressed: () {
                Navigator.pop(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const HomePage(),
                  ),
                );
              },
            ),
          ),
        ),
      ),
      body: Column(
        children: const [
          Expanded(
            child: Align(
              alignment: Alignment.topCenter,
              child: Image(
                image: NetworkImage(
                  "https://images.unsplash.com/photo-1472396961693-142e6e269027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8Mjl8fE5hdHVyZXxlbnwwfHx8fDE2NzgwODY0NTY&ixlib=rb-4.0.3&q=80&w=400",
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

試したこと

Flutterでの値の受け渡し方法、データそのままに値を次の画面に引き継ぐ方法についてググったところ、以下のページにヒット。

補足情報（FW/ツールのバージョンなど）

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/2ae915

Comments

[Jedda]

```home_page.dart
import 'package:chat_app/firestore/account_firestore.dart';
import 'package:chat_app/firestore/post_firestore.dart';
import 'package:chat_app/main.dart';
import 'package:chat_app/model/account.dart';
import 'package:chat_app/model/post.dart';
import 'package:chat_app/pages/image_zoom_page.dart';
import 'package:chat_app/pages/post_comment_page.dart';
import 'package:chat_app/pages/post_page.dart';
import 'package:chat_app/utils/like_button.dart';
import 'package:chat_app/utils/share_button.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
double padValue = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<QuerySnapshot>(
stream: PostFirestore.posts.snapshots(),
builder: (context, postSnapshot) {
if (postSnapshot.hasData) {
List<String> postAccountIds = [];
for (var doc in postSnapshot.data!.docs) {
Map<String, dynamic> data = doc.data() as Map<String, dynamic>;
if (!postAccountIds.contains(data['post_account_id'])) {
postAccountIds.add(data['post_account_id']);
}
}
return FutureBuilder<Map<String, Account>?>(
future: AccountFirestore.getPostUserMap(postAccountIds),
builder: (context, userSnapshot) {
if (userSnapshot.hasData &&
userSnapshot.connectionState == ConnectionState.done) {
return ListView.builder(
itemCount: postSnapshot.data!.docs.length,
itemBuilder: (context, index) {
Map<String, dynamic> data =
postSnapshot.data!.docs[index].data()
as Map<String, dynamic>;
Post post = Post(
id: postSnapshot.data!.docs[index].id,
imagePath: data['image_path'],
content: data['content'],
postAccountId: data['post_account_id'],
postTime: data['post_time'],
);
if (kDebugMode) {
print(post.imagePath);
}
if (kDebugMode) {
print(post.content);
}
if (kDebugMode) {
print(post.postTime);
}
Account postAccount =
userSnapshot.data![post.postAccountId]!;
return Card(
child: SizedBox(
height: MediaQuery.of(context).size.height * 0.75,
child: Column(
children: [
ListTile(
leading: const CircleAvatar(
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1472396961693-142e6e269027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNTgwfDB8MXxzZWFyY2h8Mjl8fE5hdHVyZXxlbnwwfHx8fDE2NzgwODY0NTY&ixlib=rb-4.0.3&q=80&w=400",
),
),
title: Text(
postAccount.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
post.postTime == null
? ""
: DateFormat('yyyy-MM-dd-Hm').format(
post.postTime!.toDate(),
),
style: const TextStyle(
fontWeight: FontWeight.normal,
),
),
),
Expanded(
child: post.imagePath != null
? GestureDetector(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (
context,
animation,
secondaryAnimation,
) =>
const ImageZoomPage(),
transitionsBuilder: (
context,
animation,
secondaryAnimation,
child,
) {
return const FadeUpwardsPageTransitionsBuilder()
.buildTransitions(
MaterialPageRoute(
builder: (context) =>
const ImageZoomPage(),
),
context,
animation,
secondaryAnimation,
child,
);
},
),
);
},
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(24.0),
image: DecorationImage(
image: NetworkImage(
post.imagePath!),
fit: BoxFit.cover,
),
),
),
)
: Container(
height: MediaQuery.of(context)
.size
.height *
0.3,
width: MediaQuery.of(context)
.size
.width *
0.9,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(24.0),
color: Colors.grey,
),
child: const Icon(
Icons.image,
color: Colors.white,
size: 64.0,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 25.0,
),
child: Container(
alignment: Alignment.centerLeft,
width: double.infinity,
child: Text(
post.content,
style: const TextStyle(
fontSize: 16.0,
),
),
),
),
const SizedBox(
height: 14.0,
),
Row(
mainAxisAlignment:
MainAxisAlign

Answer 1

こういうの？

• push先にパラメータを渡す。
  https://docs.flutter.dev/cookbook/navigation/passing-data
  もしくは
  https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments
  モーダル系のページの場合は、コンストラクタでパラメータを渡すという方が良く使うかな。
  モードレスだったらDI(providerなど)使う方が多いけど。

• push先からデータをもらう。
  https://docs.flutter.dev/cookbook/navigation/returning-data
  Navigator.popの第2引数にリターン値を入れて、それを上側のpushのリターンで受け取る。

  WillPopScopeも関連して利用するかも。
  https://api.flutter.dev/flutter/widgets/WillPopScope-class.html

Comments

[Jedda]

やはり値の受け渡しを行うのですね。自分の考えていたことと一緒だったので、開発に自信がつきました。ありがとうございます！