実現したいこと
- 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を定義しているコードはコメント欄に記載させていただきます。
お手本にしている動画
補足情報(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

回答1件
あなたの回答
tips
プレビュー