Flutter中CategoryMealsScreen组件Title报错，如何修复？

错误原因 #

你遇到的问题是空安全类型不匹配：从Map<String, String>中通过routeArgs['title']获取的categoryTitle是String?类型（可空字符串），但Text组件的data参数要求传入非空的String，直接传递会触发编译错误。

修复方案 #

方案1：强制解包（确保路由参数必然存在时使用）

如果你能保证跳转时一定传递了title参数，可以用!强制将可空类型转为非空类型：

appBar: AppBar(
  title: Text(categoryTitle!),
),

注意：如果实际运行时title参数缺失，会触发空指针崩溃，仅在参数100%存在时使用。

方案2：提供默认值（参数缺失时显示替代文本）

用空合并运算符??给可空变量设置默认值，避免空指针：

appBar: AppBar(
  title: Text(categoryTitle ?? '未知分类'),
),

这种方式更安全，即使参数缺失也能正常显示默认文本。

方案3：条件判断返回不同Widget

如果需要在参数为空时隐藏标题或显示其他组件，可以用三目运算符判断：

appBar: AppBar(
  title: categoryTitle != null ? Text(categoryTitle) : const SizedBox.shrink(),
),

这里参数为空时会显示一个空组件，相当于隐藏标题。

方案4：通过构造函数传参（更安全的长期方案）

避免依赖路由arguments的动态传参，改为通过组件构造函数传入必填参数，彻底杜绝空安全问题：

import 'package:flutter/material.dart';

class CategoryMealsScreen extends StatelessWidget {
  final String categoryTitle;
  final String categoryId;

  // 构造函数要求必填参数
  const CategoryMealsScreen({
    super.key,
    required this.categoryTitle,
    required this.categoryId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(categoryTitle),
      ),
      body: const Center(
        child: Text('The Recipes For The Category!'),
      ),
    );
  }
}

跳转时直接传递参数：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const CategoryMealsScreen(
      categoryTitle: '中式料理',
      categoryId: 'chinese',
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Aimyy