json.decode to List<Map<String,dynamic>> 颤动中的问题答案

【问题标题】：json.decode to List<Map<String,dynamic>> issue in flutterjson.decode to List<Map<String,dynamic>> 颤动中的问题
【发布时间】：2021-12-26 19:33:41
【问题描述】：

snap shot from the code

你好我正在尝试从 API 获取数据并将其放入 List> 我使用了几种方法，但它们不起作用在图像中，数据保存在变量中，但是当我使用 foreach 时，它会忽略索引 0 我尝试打印索引 0，它忽略它并忽略打印（提取的数据 [0]），我无法打印该列表的长度它忽略打印他们没有错误 Snapshot of the console

我正在使用颤振 2.8.0 和飞镖 2.15.0

【问题讨论】：

标签： flutter dart flutter-web dart-pub dart-null-safety

【解决方案1】：

这是你的用户界面代码

class ApiExample extends StatefulWidget {
  const ApiExample({Key? key}) : super(key: key);

  @override
  _ApiExampleState createState() => _ApiExampleState();
}

class _ApiExampleState extends State<ApiExample> {
  final items = initAndSet();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<StackHelp>>(
        future: items,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text(snapshot.data.toString()));
          }
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) => ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(snapshot.data![index].logo!),
                ),
                title: Text(snapshot.data![index].name!),
              ),
            );
          }
          return Center(
            child: Text("Waiting..."),
          );
        },
      ),
    );
  }
}

这是您的 API 代码

import 'dart:convert';
import 'dart:io';

import 'package:http/http.dart' as http;
import 'package:stackoverflow/model/stackHelp.dart';

Future<List<StackHelp>> initAndSet() async {
  const url = "http://muhammeddevxd.pythonanywhere.com/api/ecommerce";
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final Iterable decodeJson = jsonDecode(response.body);
    return decodeJson.map((item) => StackHelp.fromJson(item)).toList();
  } else {
    throw SocketException("No Internet Connection");
  }
}

这是你的模型类

class StackHelp {
  int? id;
  String? name;
  String? logo;

  StackHelp({this.id, this.name, this.logo});

  StackHelp.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    logo = json['logo'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['logo'] = this.logo;
    return data;
  }
}

最终结果是这样的

【讨论】：

【解决方案2】：

每当 Flutter 出现异常时，我建议运行以下命令（先关闭调试会话）：

命令 1

flutter clean

命令 2

flutter pub get

如果还是不正常，说明问题出在代码中。

现在，您的代码可以在我的计算机上完美运行，所以我不确定问题出在哪里。虽然我们可以尝试另一种方法：

Future<void> initAndSet() async {
    var url = 'http://muhammeddevxd.pythonanywhere.com/api/ecommerce';
    final response = await http.get(Uri.parse(url));
    var extractedData =
        List<Map<String, dynamic>>.from(jsonDecode(response.body));
    extractedData.forEach((element) {
      print(element);
    });
  }

！！不要忘记将 'dart:convert' 和 'package:http/http.dart' 导入为 http。

【讨论】：