类型'String'不是FLUTTER中类型'Widget'的子类型

mccptt67  于 2023-06-24  发布在  Flutter
关注(0)|答案(3)|浏览(156)

当我试图将json对象 Package 在Text小部件中时,出现了这个错误,代码如下所示

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

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  var url = "http://jsonplaceholder.typicode.com/photos";
  var data;
  // Used to initialize something before starting of the screen
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchdata();
  }

  
  fetchdata() async {
    var res = await http.get(url);
    // print(res.body);

    // json parsing
    data = jsonDecode(res.body);
    print(data);

    //To tell the UI that we got the data
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold has prebuild some widget themes
    return Scaffold(
      backgroundColor: Colors.green[100],
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: data != null
          
          ? ListView.builder(itemBuilder: (context, index) {
              return ListTile(
                title: Text(data[index]["title"]),
              );
            })

正如你所看到的,我得到了一个HTTP响应,并将其转换为json对象,并尝试按需在Listview中显示title对象。
类型“String”不是类型“Widget”的子类型
请修复这个错误,提前谢谢~。我是新来的Flutter

cwtwac6a

cwtwac6a1#

你可以复制粘贴下面运行完整的代码
检查data != null,当数据为null时返回CircularProgressIndicator()
代码片段

body: data != null
            ? ListView.builder(itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]["title"]),
                );
              })
            : Center(child: CircularProgressIndicator()))

工作演示


完整代码

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

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  var url = "http://jsonplaceholder.typicode.com/photos";
  var data;
  // Used to initialize something before starting of the screen
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchdata();
  }

  fetchdata() async {
    var res = await http.get(url);
    // print(res.body);

    // json parsing
    data = jsonDecode(res.body);
    print(data);

    //To tell the UI that we got the data
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    //Scaffold has prebuild some widget themes
    return Scaffold(
        backgroundColor: Colors.green[100],
        appBar: AppBar(
          title: Text("My App"),
        ),
        body: data != null
            ? ListView.builder(itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]["title"]),
                );
              })
            : Center(child: CircularProgressIndicator()));
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Homepage(),
    );
  }
}
vnzz0bqm

vnzz0bqm2#

我不确定这是正确的答案,它只是我的猜测,通过看到上述答案,我想我错过了一件事的主要. dart 页,那就是,

themeData(       
 visualDensity: VisualDensity.adaptivePlatformDensity,
)

快乐飘飘!

jaxagkaj

jaxagkaj3#

在你的标题中,你的数据应该在引号内(""),所以不是:

title: Text(data[index]["title"]),

这样提供:

title: Text("${data[index]["title"]}"),

相关问题