Flutterの画面遷移について

実現したいこと

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

前提

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

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

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

該当のソースコード

top_page.dart
1import 'package:chat_app/firestore/room_firestore.dart';
2import 'package:chat_app/model/talk_room.dart';
3import 'package:chat_app/pages/setting_profile_page.dart';
4import 'package:chat_app/pages/talk_room_page.dart';
5import 'package:cloud_firestore/cloud_firestore.dart';
6import 'package:flutter/material.dart';
7
8class TopPage extends StatefulWidget {
9  const TopPage({super.key});
10
11  @override
12  State<TopPage> createState() => _TopPageState();
13}
14
15class _TopPageState extends State<TopPage> {
16  @override
17  Widget build(BuildContext context) {
18    return Scaffold(
19      appBar: AppBar(
20        title: const Text("ChatApp"),
21        actions: [
22          IconButton(
23            onPressed: () {
24              Navigator.push(
25                context,
26                MaterialPageRoute(
27                  builder: (context) => const SettingProfilePage(),
28                ),
29              );
30            },
31            icon: const Icon(Icons.settings),
32          ),
33        ],
34      ),
35      body: StreamBuilder<QuerySnapshot>(
36          stream: RoomFireStore.joinedRoomSnapshot,
37          builder: (context, streamSnapshot) {
38            if (streamSnapshot.hasData) {
39              return FutureBuilder<List<TalkRoom>?>(
40                  future: RoomFireStore.fetchJoinedRooms(streamSnapshot.data!),
41                  builder: (context, futureSnapshot) {
42                    if (futureSnapshot.connectionState ==
43                        ConnectionState.waiting) {
44                      return const Center(
45                        child: CircularProgressIndicator(),
46                      );
47                    } else {
48                      if (futureSnapshot.hasData) {
49                        List<TalkRoom> talkRooms = futureSnapshot.data!;
50                        return ListView.builder(
51                            itemCount: talkRooms.length,
52                            itemBuilder: (context, index) {
53                              return InkWell(
54                                onTap: () {
55                                  Navigator.push(
56                                    context,
57                                    MaterialPageRoute(
58                                      builder: (context) => TalkRoomPage(
59                                        name: talkRooms[index].talkUser.name,
60                                      ), ###ここでエラー発生
61                                    ),
62                                  );
63                                },
64                                child: SizedBox(
65                                  height: 70,
66                                  child: Row(
67                                    children: [
68                                      Padding(
69                                        padding: const EdgeInsets.symmetric(
70                                            horizontal: 8.0),
71                                        child: CircleAvatar(
72                                          radius: 30,
73                                          backgroundImage: talkRooms[index]
74                                                      .talkUser
75                                                      .imagePath ==
76                                                  null
77                                              ? null
78                                              : NetworkImage(talkRooms[index]
79                                                  .talkUser
80                                                  .imagePath!),
81                                        ),
82                                      ),
83                                      Column(
84                                        crossAxisAlignment:
85                                            CrossAxisAlignment.start,
86                                        mainAxisAlignment:
87                                            MainAxisAlignment.center,
88                                        children: [
89                                          Text(
90                                            talkRooms[index].talkUser.name,
91                                            style: const TextStyle(
92                                              fontWeight: FontWeight.bold,
93                                            ),
94                                          ),
95                                          Text(
96                                            talkRooms[index].lastMessage ?? "",
97                                            style: const TextStyle(
98                                              color: Colors.grey,
99                                            ),
100                                          ),
101                                        ],
102                                      ),
103                                    ],
104                                  ),
105                                ),
106                              );
107                            });
108                      } else {
109                        return const Center(
110                          child: Text("FAILED"),
111                        );
112                      }
113                    }
114                  });
115            } else {
116              return const Center(
117                child: CircularProgressIndicator(),
118              );
119            }
120          }),
121    );
122  }
123}
124

試したこと

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

Jedda

2023/03/18 11:18

```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, ), ], ), ], ), ), ); } } ```

回答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], // このように引数を渡す
),
),
);