Flutter: невозможно динамически добавить список в список виджетов детей

Question

Я хотел бы динамически добавлять картинки в список детей GridView.Count, но он не работает.Ошибок не выдано.

class _View1State extends State<View1> {
 String url = "https://dog.ceo/api/breed/hound/images/random/6";

  Future<Map> makeRequest() async {
    final response = await http
    .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

   return json.decode(response.body);
  }

  List<Widget> items = new List();

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

    this.makeRequest().then((response) {
      response['message'].forEach((value) {
        items.add(Image.network(value));
      }).whenComplete(() => setState((){}));
   });
 }

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   appBar: new AppBar(
    title: new Center(child: new Text('Environment Sounds')),
   ),
   body: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(20.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: List.generate(items == null ? 0 : items.length, (index) {
      return Image.network(items[index]);
    })
  ));
 }
}

Что-то еще, что я должен реализовать, чтобы это заработало?Если так, что еще я должен добавить дополнительно.

Спасибо, все обновлено с моим рабочим решением.

Answer 1

Я видел 2 ошибки здесь:

1 - вам нужно вызвать setState, чтобы обновить ваш виджет со значениями, которые вы получаете с сервера.2 - похоже, что GridView.count неправильно обрабатывает didUpdateWidget, поэтому вы можете использовать GridView.builder

    @override
    void initState() {
      super.initState();
      this.makeRequest().then((response) {
        response['message'].forEach((value) {
          items.add(Image.network(value));
        });
      }).whenComplete(() {
        setState(() {});
      });
    }

    @override
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Center(child: new Text('Environment Sounds')),
          ),
          body: GridView.builder(
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (context, index) {
              return items[index];
            },
            itemCount: items.length,
            padding: const EdgeInsets.all(5.0),
          ));
    }

Answer 2

class _View1State extends State<View1> {
  String url = "https://dog.ceo/api/breed/hound/images/random/6";

  Future<Map> makeRequest() async {
    final response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

    return json.decode(response.body);
  }

  List<Widget> items = new List();

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

    this.makeRequest().then((response) {
      setState(() {
        response['message'].forEach((value) {
          items.add(Image.network(value));
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Center(child: new Text('Environment Sounds')),
        ),
        body: GridView.count(
          //primary: false,
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 10.0,
          crossAxisCount: 2,
          children: items,
        ));
  }
}

Поскольку вы получаете данные из асинхронного сервера, вам нужно вызвать setState после получения данных с сервера, чтобы перестроить виджет.