在Flutter中如何从API返回数据中获取单个字段

前置依赖配置 #

在项目pubspec.yaml文件的dependencies节点下添加网络请求库：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 可替换为最新稳定版

执行命令flutter pub get安装依赖。

方法1：手动快速解析（适合临时快速调用） #

直接通过JSON转Map后按层级取值，代码示例：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> getSingleField() async {
  // 替换为你的实际接口地址
  final url = Uri.parse('你的API接口地址');
  try {
    final response = await http.get(url);
    if (response.statusCode == 200) {
      // 将JSON字符串转为Map对象
      Map<String, dynamic> resData = jsonDecode(response.body);
      // 按层级提取logo字段，空安全处理避免异常
      String logo = resData['data']?['logo'] ?? '';
      // 这里拿到的logo就是你需要的单个字段，可直接使用
      print('提取到的logo地址：$logo');
      // 如需提取其他字段同理，比如提取status：bool status = resData['status'] ?? false;
    }
  } catch (e) {
    print('请求或解析出错：$e');
  }
}

方法2：模型类解析（适合项目规范使用，稳定性更高） #

先根据接口返回结构定义数据模型类：

class ApiResponse {
  final bool status;
  final String message;
  final Data data;

  ApiResponse({
    required this.status,
    required this.message,
    required this.data,
  });

  factory ApiResponse.fromJson(Map<String, dynamic> json) {
    return ApiResponse(
      status: json['status'] ?? false,
      message: json['message'] ?? '',
      data: Data.fromJson(json['data'] ?? {}),
    );
  }
}

class Data {
  final String banner;
  final String logo;
  final String digitalContract;
  final String priceSheet;

  Data({
    required this.banner,
    required this.logo,
    required this.digitalContract,
    required this.priceSheet,
  });

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
      banner: json['banner'] ?? '',
      logo: json['logo'] ?? '',
      digitalContract: json['digital_contract'] ?? '',
      priceSheet: json['price_sheet'] ?? '',
    );
  }
}

调用示例：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> getSingleFieldWithModel() async {
  final url = Uri.parse('你的API接口地址');
  try {
    final response = await http.get(url);
    if (response.statusCode == 200) {
      Map<String, dynamic> resJson = jsonDecode(response.body);
      ApiResponse apiResponse = ApiResponse.fromJson(resJson);
      // 直接取logo字段
      String logo = apiResponse.data.logo;
      print('提取到的logo地址：$logo');
    }
  } catch (e) {
    print('请求或解析出错：$e');
  }
}

注意事项 #

• 安卓端需要在android/app/src/main/AndroidManifest.xml的manifest节点下添加网络权限：<uses-permission android:name="android.permission.INTERNET"/>
• iOS端如果请求的是HTTP接口，需要在ios/Runner/Info.plist的dict节点下添加配置允许HTTP请求：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

• 所有取值操作都添加了空安全默认值，避免空指针或类型转换异常。

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