dart - 在从 api 填充列表时显示加载指示器

Question

我是 Flutter 的新手……我在我的应用程序中调用一个 API，我想在 API 函数完成时显示一个加载指示器，并且从 API 中检索所有内容……如何实现这一点？

class _CompaniesPageState extends State<CompaniesPage> {
  getcompanies() async {
  var url = 'my link';
  http
    .post(url, body: json.encode({ 'token': globals.token }))
    .then((response) {
      // print("Response body: ${response.body}");
      Map data = json.decode(response.body);
      final companies =
        (data['Companies'] as List).map((i) => new Company.fromJson(i));
      setState(() {
        for (final company in companies) {
          if (!company.category.contains("الراعي") &&
            !company.category.contains("الشريك") &&
            !company.category.contains("الداعم")) {
            if (company.logo != "") {
              names.add(company.name);
              logos.add(company.logo);
            }
          }
        }
      });
    });
}

@override
Widget build(BuildContext context) {
  getcompanies();
  if (globals.isguest) {
    return new Directionality(
      .....
    );
  }

}

List<Widget> createCompaniesChildren() {
  List<Widget> children = List<Widget>();
  for (int i = 0; i < names.length; i++) {
    children.add(
      new Padding(
        padding: new EdgeInsets.only(right: 15.0, left: 15.0),
        child: new Image.network(
          logos[i],
          width: 346.0,
          height: 180.0,
        ),
      ),
    );
    children.add(
      new Padding(
        padding: new EdgeInsets.only(right: 15.0, left: 15.0),
        child: new Center(
          child: new Text(
            names[i],
            style: new TextStyle(color: Colors.black, fontSize: 17.0),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
    children.add(new Divider());
  }
  return children;
}

如何在列表正在填充时显示加载指示器，然后在完成后将其关闭？

试过这个:

          body: new Padding(
        padding: new EdgeInsets.only(top: 15.0),
        child: new Center(
          child: new FutureBuilder(
            future:
                getcompanies(), // your async method that returns a future
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasData) {
                // if data is loaded
                if (snapshot.data != null) {
                  return new ListView.builder(
                    padding: new EdgeInsets.all(8.0),
                    itemExtent: 20.0,
                    itemBuilder: (BuildContext context, int i) {
                      return new Center(
                        child: new Text(
                          snapshot.data[i].name,
                          style: new TextStyle(
                              color: Colors.black, fontSize: 17.0),
                          textAlign: TextAlign.center,
                        ),
                      );
                    },
                  );
                } else {
                  // if data not loaded yet
                  return new CircularProgressIndicator();
                }
              }
            },
          ),
        ),
      ),

但是出现了这个错误:I/flutter (31276): Another exception was throwed: A build function returned null.

Answer 1

您可以使用 FutureBuilder为此目的上课。

此外，您可以使用 ListView 而不是手动创建公司列表。 .

像这样:

new FutureBuilder(
  future: getcompanies(), // your async method that returns a future
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      // if data is loaded
      return new ListView.builder(
        padding: new EdgeInsets.all(8.0),
        itemExtent: 20.0,
        itemCount: snapshot.data.length,
        itemBuilder: (BuildContext context, int i) {
          return new Center(
            child: new Text(
              snapshot.data[i].name,
              style: new TextStyle(color: Colors.black, fontSize: 17.0),
              textAlign: TextAlign.center,
            ),
          );
        },
      ).build(context);
    } else {
      // if data not loaded yet
      return new CircularProgressIndicator();
    }
  },
)