Flutter项目出现可空类型赋值错误，求解决方案

问题场景 #

开发Flutter启动页组件时，运行代码触发以下空安全类型错误：

lib/screens/splash/components/body.dart:39:43: Error: The argument type 'String?' can't be assigned to the parameter type 'String' because 'String?' is nullable and 'String' isn't.
image: splashData[index]["image"],
^
lib/screens/splash/components/body.dart:40:42: Error: The argument type 'String?' can't be assigned to the parameter type 'String' because 'String?' is nullable and 'String' isn't.
text: splashData[index]['text'],
^

原代码 #

import 'package:alselre/constants.dart';
import 'package:alselre/size_config.dart';
import 'package:flutter/material.dart';

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

  @override
  State<Body> createState() => _BodyState();
}

class _BodyState extends State<Body> {
  int currentPage = 0;
  List<Map<String, String>> splashData = [
    {
      "text": "Welcome to alSelre \nThe best platform to buy anything!",
      "image": "assets/images/splash_1.png"
    },
    {
      "text": "You'll get fastest delivery with 24/7 customer service.",
      "image": "assets/images/splash_2.png"
    },
    {
      "text": "You'll get the best products \nfrom all over the country",
      "image": "assets/images/splash_3.png"
    },
  ];


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 3,
              child: PageView.builder(
                itemCount: splashData.length,
                itemBuilder: (context, index) => SplashContent(
                  image: splashData[index]["image"],
                  text: splashData[index]['text'],
                ),
              ),
            ),
            const Expanded(
              flex: 2,
              child: SizedBox(),
            ),
          ],
        ),
      ),
    );
  }
}

class SplashContent extends StatelessWidget {
  const SplashContent({
    Key? key,
    required this.text,
    required this.image,
  }) : super(key: key);
  final String text, image;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Spacer(),
        Text(
          "alSelre",
          style: TextStyle(
            fontSize: getProportionateScreenWidth(36),
            color: kPrimaryColor,
            fontFamily: "Quebecks",
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          text,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: "Muli",
          ),
        ),
        Spacer(
          flex: 2,
        ),
        Image.asset(
          image,
          height: getProportionateScreenHeight(265),
          width: getProportionateScreenWidth(235),
        ),
      ],
    );
  }
}

错误原因 #

虽然splashData的类型是List<Map<String, String>>，但通过键取值时（splashData[index]["image"]），Dart仍会返回String?类型（无法保证键一定存在），而SplashContent的参数要求非空String，导致类型不匹配。

解决方法 #

方法一：使用空断言（!）

如果你能确保splashData中的每个Map都包含"text"和"image"键，且对应值不为null，直接用!断言告诉编译器该值一定非空：

itemBuilder: (context, index) => SplashContent(
  image: splashData[index]["image"]!,
  text: splashData[index]['text']!,
),

方法二：允许参数为空并处理空值

如果需要支持text或image为空的场景，修改SplashContent的参数为可空类型，并在组件内部处理空值：

class SplashContent extends StatelessWidget {
  const SplashContent({
    Key? key,
    required this.text,
    required this.image,
  }) : super(key: key);
  // 改为可空类型
  final String? text, image;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        // ... 其他代码
        Text(
          text ?? "", // 空值时显示空字符串
          textAlign: TextAlign.center,
          style: TextStyle(
            fontFamily: "Muli",
          ),
        ),
        // ...
        Image.asset(
          image ?? "assets/images/default_splash.png", // 空值时使用默认图片
          height: getProportionateScreenHeight(265),
          width: getProportionateScreenWidth(235),
        ),
      ],
    );
  }
}

方法三：提供默认值

在取值时直接用??设置默认值，避免空类型：

itemBuilder: (context, index) => SplashContent(
  image: splashData[index]["image"] ?? "assets/images/default_splash.png",
  text: splashData[index]['text'] ?? "欢迎使用alSelre",
),

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