Flutter：像WhatsApp一样在ChatPage的AppBar中显示userName和userImageLink

Question

我正在开发一个 Flutter 应用程序，其中有一个 ContactsPage，它从 Firestore 获取用户个人资料，并允许导航到每个联系人的 ChatPage。我想像 WhatsApp 一样在 ChatPage 的 AppBar 中显示 userName 和 userImageLink。

相关代码结构如下：

联系人页面（contacts_page.dart）：

// Imports and class definition...

void navigateToIndividualPage(Contact contact) {
  Navigator.pushNamed(
    context,
    ChatPage.screenRoute,
    arguments: {
      'name': doc.get('name')?? 'No name',
      'userImageLink': (doc.data() as Map<String, dynamic>?)?['image_link'] ?? '',
      // Other necessary user data
    },
  );
}

聊天页面（chat_page.dart）：

import 'package:flutter/material.dart';

class ChatPage extends StatelessWidget {
  static const String screenRoute = "ChatPage";

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    final userName = args['name'];
    final userImageLink = args['userImageLink'];

    return Scaffold(
      appBar: AppBar(
        leading: CircleAvatar(
          backgroundImage: NetworkImage(userImageLink),
        ),
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(userName),
            Text(
              'Last seen',
              style: TextStyle(fontSize: 12),
            ),
          ],
        ),
      ),
      body: Center(
        // Placeholder for chat UI
      ),
    );
  }
}

从 ContactsPage 导航到 ChatPage 时，我在线上遇到 TypeError

final userName = args['name']

:

“Null”类型不是“String”类型的子类型

这表明 args['name'] 或 args['userImageLink'] 在某些情况下可能为空或丢失。

我已经使用 Navigator.pushNamed 检查了 args 是否从 ContactsPage 正确传递，并确保从 ChatPage 中的 args 正确访问了 userName 和 userImageLink。

我希望从ContactsPage中获取的userName和userImageLink能够显示在ChatPage的AppBar中，让用户可以看到联系人的姓名和头像。

任何有关处理参数中的空值或实现此功能的替代方法的帮助将不胜感激。

Answer 1

定义路线如下

GoRoute(
      path: 'new_screen',

      builder: (BuildContext context, GoRouterState state) {
      
        final dataParams = state.extra as Map<String, dynamic>;

        final userImageLink = dataParams['userImageLink'];

        return NewScreen(
         userImageLink: userImageLink!,
        );
      },
)

然后在您的屏幕中将其接收为

//The New screen
class NewScreen extends StatefulWidget {

  //Receive as Params
  final String? userImageLink;

  const NewScreen({
    super.key, 
    this.userImageLink,
  });

  @override
  State<NewScreen> createState() => _NewScreenState();
}

然后您将能够在这个新屏幕中访问您的参数

要从上一屏幕传递它们，请使用

GoRouter.of(context).push(
        '/new_screen',
        extra: {
          'userImageLink': userImageLink
});