我对Flutter 翼是新手. 我制作了一个从API获取数据并在ListView中显示它们的Ffltter项目. 如果快照中没有数据,则显示加载屏幕.

我在修复一些小错误后运行程序时遇到错误.

错误:type 'String' is not a subtype of type 'Widget?

enter image description here

我的代码:

import 'dart:convert';

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

class DataFromAPI extends StatefulWidget {
  const DataFromAPI({Key? key}) : super(key: key);

  @override
  State<DataFromAPI> createState() => _DataFromAPIState();
}

class _DataFromAPIState extends State<DataFromAPI> {

  getUserData() async{
    var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
    var jsonData = jsonDecode(response.body);
    print(response.body);
    List<User> users = [];

    for(var u in jsonData){
      User user = User(u['name'],u['email'],u['username']);
      users.add(user);
    }
    //print(users.length);
    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get Data From API'),
      ),
      body: Container(
        child: Card(
          child: FutureBuilder(
            future: getUserData(),
            builder: (context, AsyncSnapshot snapShot){
              if(snapShot.data == null){
                return Container(child: Center(child: Text('Loading'),),);
              }else{
                return ListView.builder(
                    itemCount: snapShot.data.length,
                    itemBuilder: (context, i){
                      return ListTile(title: snapShot.data[i].name);
                    });
              }
            },
          ),
    ))
    );
  }
}

class User{
  final String name, email, userName;
  User(this.name, this.email, this.userName);
}

输出控制台:

Syncing files to device sdk gphone64 x86 64...
Reloaded 0 libraries in 506ms (compile: 12 ms, reload: 0 ms, reassemble: 433 ms).
D/EGL_emulation( 6751): app_time_stats: avg=8895.54ms min=975.35ms max=16815.74ms count=2

======== Exception caught by widgets library =======================================================
The following _TypeError was thrown building:
type 'String' is not a subtype of type 'Widget?'

推荐答案

您的错误来自于您正在try 创建一个100小部件,并且作为标题您正在传递一个101.

但如果你看看ListTile的documentation,你会发现它预计标题是101:

Container(
  color: Colors.green,
  child: const Material(
    child: ListTile(
      title: Text('ListTile with red background'),
      tileColor: Colors.red,
    ),
  ),
)

因此,您需要将代码更改为:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get Data From API'),
      ),
      body: Container(
        child: Card(
          child: FutureBuilder(
            future: getUserData(),
            builder: (context, AsyncSnapshot snapShot){
              if(snapShot.data == null){
                return Container(child: Center(child: Text('Loading'),),);
              }else{
                return ListView.builder(
                    itemCount: snapShot.data.length,
                    itemBuilder: (context, i){
                      return ListTile(title: const Text(snapShot.data[i].name)); //// <---------------------
                    });
              }
            },
          ),
    ))
    );
  }

Flutter相关问答推荐

如何在凌晨12点显示00:00(24小时格式)而不是在Flutter 中显示24:00

video_player在Android上返回401 Unauthorized with Bunny CDN

什么是dart :这只是dart ?

如何将WebViewWidget和WillPopScope结合起来

Flutter在CustomPainter的右上角和左上角添加了2条曲线

如何更改Flutter 中文本的混合模式?

Flutter Web Dio XMLHttpRequest 上传大文件时出错

Flutter - Riverpod 2.0 - 如何访问 onDispose 回调?

Flutter 未处理的异常 - 对 null 值使用 Null 判断运算符

在使用 Android 12+ 的真实 Android 设备上,SingleChildScrollView 中最初位于视口之外的无响应 Web 视图

Flutter:如何在现有布局之上显示圆角布局?

Flutter蓝牙 - 如何通过蓝牙从设备中获取文件?

Flutter列顶部和底部出现不必要的边距问题

Agora VideoCall 不显示远程视频网格

如何使这种相机叠加在Flutter 中?

在向 Google Route API 发送 HTTP Post 请求期间发生错误,

如何在 GridView.builder 中设置 textform 字段并在 flutter 中将 12 个 textformfield 作为单个字符串获取?

如何根据字符串值动态构建和显示小部件?

更新未知文档 ID firebase\flutter 中的字段

我们什么时候在flutter中初始化一个provider?