在 flutter 中从 api 获取数据时出错

Question

我想在 flutter 中从 json plaeholder api 获取名字。但它给出了错误，以下是我的代码：

    FutureBuilder(
          future: getuser(),
          builder: (context, snapshot){
if (snapshot.data==null) {
  return Container(
    child: Text("nothing"),
  );
}
else return ListView.builder(
  itemCount: snapshot.data.length,
  itemBuilder: (context,i){
    return ListTile(title: Text(snapshot.data[i].name),);  
    }
  );
          },
        )

Answer 1

试试下面的代码，我认为你的问题已经解决，同时添加 id 和电子邮件

Your API Call Function

Future<List<dynamic>> getJobsData() async {
    String url = 'https://jsonplaceholder.typicode.com/users';
    var response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    return json.decode(response.body);
  }

Your Widget

     Center(
          child: FutureBuilder<List<dynamic>>(
            future: getJobsData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      var name = snapshot.data[index]['name'];
                      var email = snapshot.data[index]['email'];
                      var id = snapshot.data[index]['id'];
                      return Card(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.green.shade300),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Column(
                          children: [
                            ListTile(
                              leading: Text(id.toString()),
                              title: Text(name),
                              subtitle: Text(email),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                );
              }
              return CircularProgressIndicator();
            },
          ),
        ),

您的结果屏幕类似于 ->

在 flutter 中从 api 获取数据时出错

error in getting data from api in flutter

flutter

api

dart

gridview