Flutter ListView данных из API не отображается в моем веб-приложении

Question

Здравствуйте, я пытаюсь создать listView элемента из данных API для моего веб-проекта. Я не получаю результат, показываемый на странице каждый раз, когда я пытаюсь. Я должен был показать ListView французского отдела; Я пытался использовать код более базовый c для отчаянных попыток получить результаты на моей странице. Поэтому я пытаюсь использовать более простой код, чем мой, чтобы увидеть, как он работает, но все еще не дает результата (Пустая страница в appBar). Я не думаю, что хорошо понимаю, как это должно работать, но я нашел учебник, в котором был пример кода случайного ListView элемента из данных API; но это также не работает, я немного подчеркнут ... Есть ли проблемы с этим кодом? Могу ли я получить более подробное объяснение о том, как получить данные из API и отобразить их в ListView на Flutter? Спасибо всем за помощь

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

const baseUrl = "https://jsonplaceholder.typicode.com";

class API {
  static Future getUsers() {
    var url = baseUrl + "/users";
    return http.get(url);
  }
}


class User {
  int id;
  String name;
  String email;

  User(int id, String name, String email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  User.fromJson(Map json)
      : id = json['id'],
        name = json['name'],
        email = json['email'];

  Map toJson() {
    return {'id': id, 'name': name, 'email': email};
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  build(context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Http App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyListScreen(),
    );
  }
}

class MyListScreen extends StatefulWidget {
  @override
  createState() => _MyListScreenState();
}

class _MyListScreenState extends State {
  var users = new List<User>();

  _getUsers() {
    API.getUsers().then((response) {
      setState(() {
        Iterable list = json.decode(response.body);
        users = list.map((model) => User.fromJson(model)).toList();
      });
    });
  }

  initState() {
    super.initState();
    _getUsers();
  }

  dispose() {
    super.dispose();
  }

  @override
  build(context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("User List"),
        ),
        body: ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(users[index].name));
          },
        ));
  }
}

Answer 1

Я проверил ваш код, и все в порядке, вам просто нужно добавить ProgressIndicator. На заметку:

• Отображение CircularProgressIndicator при выполнении вызовов API
• Разделение класса модели и классов вызовов API (поместите их в разные файлы для быстрой будущей модификации)
• Используйте FutureBuilder для задач, выполнение которых занимает много времени (асин c задач)

Для текущей реализации измените следующим образом:

1. Инициализировать загрузку

   class _MyListScreenState extends State {var users = new List (); bool _isLoading = true;

2. Состояние обновления после завершения загрузки

  _getUsers() {
  API.getUsers().then((response) {
  setState(() {
    _isLoading = false;
    Iterable list = json.decode(response.body);
    users = list.map((model) => User.fromJson(model)).toList();
   });
 });
 }

3. Добавьте виджет в ваш метод сборки

  body: _isLoading
        ? Center(child: CircularProgressIndicator())
        : ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(users[index].name));
            },
          ));

Answer 2

Попробуйте использовать asyn c и ожидайте на getUsers:

static Future getUsers() async {
  var url = baseUrl + "/users";
  return await http.get(url);
}