[英]type 'String' is not a subtype of type 'Widget? in flutter dart
我是 Flutter 的新手。我做了一个 flutter 项目,它从 API 获取数据并将它们显示在 ListView 中。 如果 snapShot 中没有数据,则会显示加载屏幕。
修复了一些小错误后运行程序时出现错误。
错误: “String”类型不是“Widget”类型的子类型?
我的代码:
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);
}
控制台 Output:
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?'
您的错误来自于您正在尝试创建一个ListTile小部件,并且作为您传递的标题String 。
但是如果您查看 ListTile 的文档,您会发现它期望标题是一个文本小部件:
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)); //// <---------------------
});
}
},
),
))
);
}
您必须根据您的要求将小部件添加到ListTile
标题,然后才能为其分配文本值。
对于字符串,您可以在此处使用Text
小部件
itemBuilder: (context, i) {
return ListTile(title: Text(snapShot.data[i].name));
}
列表视图标题需要一个小部件,您需要传递一个小部件而不是您现在正在做的字符串。
只需将您的标题字符串包装在文本小部件中。
itemBuilder: (context, i){
return ListTile(title: Text(snapShot.data[i].name??''));
});
更改您的 ListTile
从
return ListView.builder(
itemCount: snapShot.data.length,
itemBuilder: (context, i){
return ListTile(title: snapShot.data[i].name);
});
}
到
return ListView.builder(
itemCount: snapShot.data.length,
itemBuilder: (context, i){
return ListTile(title: Text(snapShot.data[i].name));
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.