Flutter 解决数据未加载时访问 Map 键值报 NullError 问题

Flutter 解决数据未加载时访问 Map 键值报 NullError 问题

在 Flutter 开发中，异步请求数据未完成前，Map 对象为 null。此时直接访问其子属性（如 mapResponse['item']['name']）会抛出空指针异常。

代码示例

class DetailPage extends StatefulWidget {
  final String text;
  DetailPage({Key key, @required this.text}) : super(key: key);
  @override
  _DetailPage createState() => _DetailPage();
}

class _DetailPage extends State<DetailPage> {
  Map mapResponse;

  Future fetchData() async {
    Uri url = Uri.parse(''); // 替换为实际接口地址

    Response<String> response = await Dio().request(url.toString(),
        options: Options(
            headers: {}));

    if (response.statusCode == 200) {
      setState(() {
        mapResponse = json.decode(response.data);
      });
    }
  }

  @override
  void initState() {
    fetchData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Stack(
          children: <Widget>[
            SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(height: 300),
                        mapResponse != null && mapResponse['item'] != null
                            ? Text(
                                mapResponse['item']['name'],
                                style: TextStyle(
                                  fontFamily: 'Avenir',
                                  fontSize: 56,
                                  color: Colors.blue,
                                  fontWeight: FontWeight.w900,
                                ),
                              )
                            : CircularProgressIndicator(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

JSON 数据结构

{
    "status": true,
    "item": {
        "name":