Flutterの画面遷移について

Question

実現したいこと

• Flutter及びDartのエラーメッセージを解消し、今後の知見に役立てる。

前提

動画を見ながら、Flutter × Firebaseを用いてチャットアプリを開発しています。
自分が参加しているトークルームの情報を取得した後、表示する処理を実装中に以下の問題が発生しました。

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

The named parameter 'talkRoom' is required, but there's no corresponding argument.
Try adding the required argument.

該当のソースコード

import 'package:chat_app/firestore/room_firestore.dart';
import 'package:chat_app/model/talk_room.dart';
import 'package:chat_app/pages/setting_profile_page.dart';
import 'package:chat_app/pages/talk_room_page.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

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

  @override
  State<TopPage> createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ChatApp"),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const SettingProfilePage(),
                ),
              );
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: StreamBuilder<QuerySnapshot>(
          stream: RoomFireStore.joinedRoomSnapshot,
          builder: (context, streamSnapshot) {
            if (streamSnapshot.hasData) {
              return FutureBuilder<List<TalkRoom>?>(
                  future: RoomFireStore.fetchJoinedRooms(streamSnapshot.data!),
                  builder: (context, futureSnapshot) {
                    if (futureSnapshot.connectionState ==
                        ConnectionState.waiting) {
                      return const Center(
                        child: CircularProgressIndicator(),
                      );
                    } else {
                      if (futureSnapshot.hasData) {
                        List<TalkRoom> talkRooms = futureSnapshot.data!;
                        return ListView.builder(
                            itemCount: talkRooms.length,
                            itemBuilder: (context, index) {
                              return InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) => TalkRoomPage(
                                        name: talkRooms[index].talkUser.name,
                                      ), ###ここでエラー発生
                                    ),
                                  );
                                },
                                child: SizedBox(
                                  height: 70,
                                  child: Row(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 8.0),
                                        child: CircleAvatar(
                                          radius: 30,
                                          backgroundImage: talkRooms[index]
                                                      .talkUser
                                                      .imagePath ==
                                                  null
                                              ? null
                                              : NetworkImage(talkRooms[index]
                                                  .talkUser
                                                  .imagePath!),
                                        ),
                                      ),
                                      Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            talkRooms[index].talkUser.name,
                                            style: const TextStyle(
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                          Text(
                                            talkRooms[index].lastMessage ?? "",
                                            style: const TextStyle(
                                              color: Colors.grey,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            });
                      } else {
                        return const Center(
                          child: Text("FAILED"),
                        );
                      }
                    }
                  });
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}

試したこと

TalkRoomPageに渡されている引数に誤りが出ているというメッセージなので、TalkRoomPageを定義しているところに移動し、状況を確認。TalkRoomPage内では変数talkRoomだけ定義しています。
なので、普通にいけばTalkRoomPageで渡されている引数にもtalkRoomを渡せば良いのですが、
お手本の動画では、talk_room_page.dart内のTalkRoomPageクラスで変数talkRoomを定義した後、
top_page.dart内で画面遷移の定義時に引数としてtalkRooms[index]という書き方をして、エラーもなくビルドできています。自分も動画と同じように画面遷移を実現させたいのですが、長時間経過してしまっているので有識者の方にアドバイスいただきたいと考えました。長くなってしまっているのでtalkRoomを定義しているコードはコメント欄に記載させていただきます。

お手本にしている動画

https://www.udemy.com/share/104Qfo3@_Evm9gUYVGWlRZOzCv7zuOGENpsslfeIz4a33WTixwGZVb6AGywsL4vQRtqZQTi5GQ==/

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

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

Comments

[Jedda]

```talk_room_page.dart
import 'package:chat_app/firestore/room_firestore.dart';
import 'package:chat_app/model/message.dart';
import 'package:chat_app/model/talk_room.dart';
import 'package:chat_app/utils/shared_prefs.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart' as intl;

class TalkRoomPage extends StatefulWidget {
final TalkRoom talkRoom;
const TalkRoomPage({super.key, required this.talkRoom});

@override
State<TalkRoomPage> createState() => _TalkRoomPageState();
}

class _TalkRoomPageState extends State<TalkRoomPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(236, 255, 255, 255),
appBar: AppBar(
title: Text(widget.talkRoom.talkUser.name),
),
body: SafeArea(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
StreamBuilder<QuerySnapshot>(
stream:
RoomFireStore.fetchMessageSnapshot(widget.talkRoom.roomId),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.only(bottom: 60),
child: ListView.builder(
physics: const RangeMaintainingScrollPhysics(),
shrinkWrap: true,
reverse: true,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
final doc = snapshot.data!.docs[index];
final Map<String, dynamic> data =
doc.data() as Map<String, dynamic>;
final Message message = Message(
message: data['message'],
isMe: SharedPrefs.fetchUid() == data['sender_id'],
sendTime: data['send_time'],
);
return Padding(
padding: EdgeInsets.only(
top: 10,
left: 10,
right: 10,
bottom: index == 0 ? 10 : 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: message.isMe
? TextDirection.rtl
: TextDirection.ltr,
children: [
Container(
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width *
0.6),
decoration: BoxDecoration(
color: message.isMe
? Colors.blueGrey
: Colors.green,
borderRadius: BorderRadius.circular(15),
),
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
child: Text(
message.message,
style: TextStyle(
color: message.isMe
? Colors.white
: Colors.white,
),
),
),
Text(
intl.DateFormat('HH:mm').format(
message.sendTime.toDate(),
),
),
],
),
);
}),
);
} else {
return const Center(
child: Text("NO MESSAGE"),
);
}
}),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.white,
height: 60,
child: Row(
children: [
const Expanded(
child: Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 10),
border: OutlineInputBorder(),
),
),
),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.send),
),
],
),
),
Container(
color: Colors.white,
height: MediaQuery.of(context).padding.bottom * 0.0,
),
],
),
],
),
),
);
}
}
```

Answer 1

このエラーメッセージは、TalkRoomPageで定義されているtalkRoomという名前のパラメータが必須であるにもかかわらず、引数が渡されていないことを示しています。
この問題を解決するには、TopPage内でTalkRoomPageへの遷移時にtalkRoom引数を渡す必要があります。

まず、talk_room_page.dartでTalkRoomPageのコンストラクタにtalkRoom引数を持たせることを確認してください。
TalkRoomPageは以下のようになるはずです。
class TalkRoomPage extends StatefulWidget {
final TalkRoom talkRoom;
const TalkRoomPage({required this.talkRoom, Key? key}) : super(key: key);

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

次に、top_page.dartでTalkRoomPageへの遷移時に、talkRoom引数を渡すように修正します。
以下のようになります。
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TalkRoomPage(
talkRoom: talkRooms[index], // このように引数を渡す
),
),
);

これで、TalkRoomPageへ遷移する際にtalkRoom引数が渡されるようになり、エラーメッセージが解消されるはずです。

Comments

[Jedda]

ありがとうございます。