该项目无法识别 AsyncSnapshot

Question

我正在尝试从 json 链接获取数据，但是当我运行应用程序时，我什么也没看到，我认为问题出在 AsyncSnapshot 上，因为尽管项目无法定义此类主文件中的所有导入都是正确的，并且 pubspec.yaml 依赖项没问题

我看到了类似的 question 并尝试了解决方案，但它也对我不起作用

这是完整的代码

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

void main() {
  runApp(MaterialApp(
      home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Future<List<User>> _getUsers() async {
    var data = await http.get("http://www.json-generator.com/api/json/get/bYKKPeXRcO?indent=2");
    var jasonData = json.decode(data.body);
    List<User> users = [];

    for(var i in jasonData){
      User user = User(i["index"], i["about"], i["name"], i["picture"], i["company"], i["email"]);
      users.add(user);
    }

    print(users.length);
    return users;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yat Flutter App',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, fontFamily: 'Tahoma') ),
      ),

      body: Column(
        children: [
          FutureBuilder(
            future: _getUsers(),
            builder: (BuildContext context,AsyncSnapshot asyncSnapshop){
              return ListView.builder(
                itemCount: asyncSnapshop.data.length,
                itemBuilder: (BuildContext context, int index){
                  return ListTile(
                    title: Text(asyncSnapshop.data[index].name),


                  );
                }
              );
            },

          ),
          
        ],

      ),

    );
  }
}

class User{
  final int index;
  final String about;
  final String name;
  final String picture;
  final String company;
  final String email;

  User(this.index, this.about, this.name, this.picture, this.company,
      this.email);
}

pubspec.yaml

name: yat_flutter_app
description: A new Flutter application.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.2


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Answer 1

我发现代码主要有两点。

第一个与FutureBuilder的使用有关。您需要等到 asyncSnapshop 有数据后再尝试使用它。您确实需要询问是否 asyncSnapshop.hasData（查看答案末尾的代码）。

第二件事有点奇怪。如果请求是通过 http 完成的，json-generator.com 不会在应用程序的上下文中返回任何数据。一旦我使用 https，它就开始返回数据。

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

void main() {
  runApp(MaterialApp(
      home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Future<List<User>> _getUsers() async {
    var data = await http.get("https://www.json-generator.com/api/json/get/bYKKPeXRcO?indent=2");
    var jasonData = json.decode(data.body);
    List<User> users = [];

    for(var i in jasonData){
      User user = User(i["index"], i["about"], i["name"], i["picture"], i["company"], i["email"]);
      users.add(user);
    }

    return users;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yat Flutter App',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, fontFamily: 'Tahoma') ),
      ),

      body: Column(
        children: [
          FutureBuilder(
            future: _getUsers(),
            builder: (BuildContext context,AsyncSnapshot asyncSnapshop){
              if(asyncSnapshop.hasData) {
                return Expanded(
                  child: ListView.builder(
                      itemCount: asyncSnapshop.data.length,
                      itemBuilder: (BuildContext context, int index){
                        return ListTile(
                          title: Text(asyncSnapshop.data[index].name),
                        );
                      }
                  ),
                );
              } else {
                return Text("Loading, please wait...");
              }

            },

          ),

        ],

      ),

    );
  }
}

class User{
  final int index;
  final String about;
  final String name;
  final String picture;
  final String company;
  final String email;

  User(this.index, this.about, this.name, this.picture, this.company,
      this.email);
}

Answer 2

只需将正文中的 Column 替换为 Container，然后您的代码就可以工作了

我认为 FutureBuilder 不能与 Column 一起执行，这很奇怪，这很奇怪，它应该适用于两个小部件

编辑后的完整代码

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

void main() {
  runApp(MaterialApp(
      home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Future<List<User>> _getUsers() async {
    var data = await http.get("https://www.json-generator.com/api/json/get/bYKKPeXRcO?indent=2");
    var jasonData = json.decode(data.body);
    List<User> users = [];

    for(var i in jasonData){
      User user = User(i["index"], i["about"], i["name"], i["picture"], i["company"], i["email"]);
      users.add(user);
    }

    print(users.length);
    return users;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Yat Flutter App',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, fontFamily: 'Tahoma') ),
      ),

      body: Container(
        child:
          FutureBuilder(
            future: _getUsers(),
            builder: (BuildContext context,AsyncSnapshot asyncSnapshop){
              return ListView.builder(
                itemCount: asyncSnapshop.data.length,
                itemBuilder: (BuildContext context, int index){
                  return ListTile(
                    title: Text(asyncSnapshop.data[index].name),


                  );
                }
              );
            },

          ),


      ),

    );
  }
}

class User{
  final int index;
  final String about;
  final String name;
  final String picture;
  final String company;
  final String email;

  User(this.index, this.about, this.name, this.picture, this.company,
      this.email);
}