如果我的列表为空，我该如何显示图片？

Question

我希望将未找到记录的图像或文本居中显示，所有细节都是从API获取的。在原生Android中，可以使用setEmptyView()方法来实现此条件，但不知道如何在flutter中实现。进度对话框正在运行，但文本未显示。我在JSON响应中添加了代码。

List<NewAddressModel> newAddress = List();
bool isLoading = false;

Scaffold(
body :isLoading
          ? Center(
        child: CircularProgressIndicator(),
      )
          : Container(
          color: Color.fromRGBO(234, 236, 238, 1),
          child: getListView()
      ),
)

Widget getListView(){
    return newAddress.isNotEmpty ?
    ListView.builder(itemCount: newAddress.length,
        itemBuilder: (BuildContext context, int index) {
          return addressViewCard(index);
        }

    )
        : Center(child: Text("No Found"));
  }

Future<List>hitGetAddressApi() async {
    setState(() {
      isLoading = true;
    });
    final response = await http.post(api);

    var userDetails = json.decode(response.body);
    if (response.statusCode == 200) {
      newAddress = (json.decode(response.body) as List)
          .map((data) => new NewAddressModel.fromJson(data))
          .toList();
      setState(() {
        isLoading = false;
        newAddressModel = new NewAddressModel.fromJson(userDetails[0]);
      });
    }


    return userDetails;
  }

This is JSON Response which I am getting from my API.
[
    {
        "id": "35",
        "name": "Toyed",
        "mobile": "8855226611",
        "address": "House No 100",
        "state": "Delhi",
        "city": "New Delhi",
        "pin": "000000",
        "userid": "2",
    }
]

- Jorden

---

你检查过你是否得到了正确的响应吗？我的意思是状态码200。 - Viren V Varasadiya

你可以定义一个布尔变量来保存 API 是否正在加载的状态，当你从 API 获取到响应后将其设置为 false 并显示其他视图。因此，在你的脚手架中，你可以检查该变量并相应地显示视图。 - Karan Mehta

是的，如果我添加一个项目，我会得到一个响应，但当我删除所有细节时，进度对话框会无法停止地运行。 - Jorden

告诉我如果你不理解 - Karan Mehta

如果我的JSON响应为空或列表为空，则在中心显示“未找到记录”。 - Jorden

使用FutureBuilder将API的结果作为Future返回。 - Dev

Answer 1

我想告诉您，请使用FutureBuilder来处理此类用法。在您的代码中，我不确定您在何处更改了isLoading标志的状态。

因此，请更新您的问题，并确保您在正确的范围内更改了isLoading标志。

请参考此处实现FutureBuilder。

- Devarsh Ranpara

Answer 2

更好的方法是使用FutureBuilder，在这里您可以进行各种检查。

- Talha Javed Khan

Answer 3

FutureBuilder<AsyncSnapshot<AsyncSnapshot>>(
        builder: (context, snap) {
          if (snap.connectionState != ConnectionState.done) {
            return Text("loading");
          } else {
            if (snap.hasError) {
              return Text([snap.error.toString()]); 
            }
            else {
              if (snap.hasData) {


                return getListView("${snap.data}");
              } else {
                return Text("No DAta");
              }
            }
          }
        },
        future:
        methodToGetAPIResult(),
    );

- Dev

---

如果列表中没有数据，则每次执行错误块。 - Jorden

请解释发生了什么。 - Dev

每次执行这个if (snap.hasError) { return Text([snap.error.toString()]); }代码块。 - Jorden

如果我的列表为空。 - Jorden

在这种情况下，[snap.error.toString()] 的输出是什么？因为似乎在获取 snap 时出现了错误。 - Dev

Answer 4

你需要使用不同的小部件来实现这个功能。你可以使用类似这样的方式，在没有数据时显示空图像。

@override
    Widget build(BuildContext context) {
        if (array.isEmpty()) {
            return Widget(child: Thing(this.name));
        } else {
            return Widget(child: WithoutThing(this.name));
        }
    }

希望这对你有所帮助。

- user12688502

---

@开发者，现在请检查。 - user12688502

Answer 5

Try this,

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() => runApp(MaterialApp(home: MyWidget()));

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Future<List<NewAddressModel>> newAddress;

  @override
  void initState() {
    newAddress = hitGetAddressApi();
    super.initState();
  }

  Future<List<NewAddressModel>> hitGetAddressApi() async {
    final response = await http.post("api");
    if (response.statusCode == 200) {
      final responseBody = json.decode(response.body);
      if (responseBody is List)
        return responseBody
            .map((data) => new NewAddressModel.fromJson(data))
            .toList();
      else {
        print(responseBody);
        return null;
      }
    } else {
      print(response.statusCode);
      throw Exception("Problem in fetching address List");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<NewAddressModel>>(
        future: newAddress,
        builder: (context, snapShot) {
          if (snapShot.connectionState == ConnectionState.waiting)
            return Center(
              child: CircularProgressIndicator(),
            );
          else if (snapShot.hasError) {
            return Center(
              child: Text("ERROR: ${snapShot.error}"),
            );
          } else {
            if (snapShot.hasData && snapShot.data.isNotEmpty)
              return getListView(snapShot.data);
            else //`snapShot.hasData` can be false if the `snapshot.data` is null
              return Center(
                child: Text("No Data Found"),
              );
          }
        },
      ),
    );
  }

  Widget getListView(List<NewAddressModel> addressList) {
    return ListView.builder(
      itemCount: addressList.length,
      itemBuilder: (BuildContext context, int index) {
        final address = addressList[index];
        //Change `addressViewCard` to accept an `NewAddressModel` object
        return addressViewCard(address);
      },
    );
  }

  Widget addressViewCard(NewAddressModel address) {
    //implement based on address instead of index
    return ListTile(title: Text("${address.address}"));
  }
}

class NewAddressModel {
  String id;
  String name;
  String mobile;
  String address;
  String state;
  String city;
  String pin;
  String userid;

  NewAddressModel({
    this.id,
    this.name,
    this.mobile,
    this.address,
    this.state,
    this.city,
    this.pin,
    this.userid,
  });

  factory NewAddressModel.fromJson(Map<String, dynamic> json) =>
      NewAddressModel(
        id: json["id"],
        name: json["name"],
        mobile: json["mobile"],
        address: json["address"],
        state: json["state"],
        city: json["city"],
        pin: json["pin"],
        userid: json["userid"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "mobile": mobile,
        "address": address,
        "state": state,
        "city": city,
        "pin": pin,
        "userid": userid,
      };
}

- Crazy Lazy Cat

---

未处理的异常：在类型转换中，'_InternalLinkedHashMap<String, dynamic>' 类型不是 'List<dynamic>' 类型的子类型。 - Jorden

发生了这个异常。 - Jorden

@Toyed 响应体是一个列表吗？你能在问题中添加一个示例的JSON响应吗？ - Crazy Lazy Cat

是的，我正在添加。 - Jorden

@Toyed 我更新了代码。理解如何处理响应体数据和JSON转换，然后你就可以轻松地操作它们了。 - Crazy Lazy Cat

Answer 6

在你的情况下，最好的解决方案将是使用FutureBuilder。 FutureBuilder类 一篇可以帮助你的文章。

- user11644496