2021年1月22日星期五

Flutter load json in ListView return always empty data

I' m trying to build a simple app for viewing json data. I started with the example on flutter website: https://flutter.dev/docs/cookbook/networking/fetch-data

This is working.

Now I' m trying to load a List of comments from: https://jsonplaceholder.typicode.com/comments/

When I run the app I see only the circle loaded from CircularProgressIndicator. Why? I'm not able to get the data but I don' t understand why, can you help me? Here is the code:

import 'package:flutter/material.dart';  import 'dart:async';  import 'package:http/http.dart' as http;  import 'dart:convert';    void main() => runApp(new MyApp());    class MyApp extends StatelessWidget {    @override    Widget build(BuildContext context) {      return new MaterialApp(        title: 'Flutter json test',        theme: new ThemeData(          primarySwatch: Colors.blue,        ),        home: new MyHomePage(title: 'Flutter json test'),      );    }  }    class MyHomePage extends StatefulWidget {    MyHomePage({Key key, this.title}) : super(key: key);      final String title;      @override    _MyHomePageState createState() => new _MyHomePageState();  }    class _MyHomePageState extends State<MyHomePage> {      Future<List<Comment>> _getComments() async {        var data = await http.get("https://jsonplaceholder.typicode.com/comments/");      List<Comment> comments = [];        if(data.statusCode==200) {        var jsonData = json.decode(data.body);          for (var d in jsonData) {          Comment comment = Comment(              d["postId"],d["id"], d["name"], d["email"], d["body"]);            comments.add(comment);        }          print(comments.length.toString());          return comments;      }      else {        throw Exception('Failed to load album');      }    }      @override    Widget build(BuildContext context) {      return new Scaffold(        appBar: new AppBar(          title: new Text(widget.title),        ),        body: Container(          child: FutureBuilder(            future: _getComments(),            builder: (BuildContext context, AsyncSnapshot snapshot){              if(snapshot.hasData){                return ListView.builder(                  itemCount: snapshot.data.length,                  itemBuilder: (BuildContext context, int index) {                    return ListTile(                      title: Text( snapshot.data[index]['name']),                      subtitle: Text(snapshot.data[index]['email']),                      onTap: (){                        Navigator.push(context,                            new MaterialPageRoute(builder: (context) => DetailPage(snapshot.data[index]))                        );                      },                    );                  },                );              } else {                return Center(                  child: CircularProgressIndicator(),                );              }            },          ),        ),      );    }  }    class DetailPage extends StatelessWidget {      final Comment comment;      DetailPage(this.comment);      @override    Widget build(BuildContext context) {      return Scaffold(          appBar: AppBar(            title: Text(comment.name),          )      );    }  }      class Comment {    final int postId;    final String id;    final String name;    final String email;    final String body;      Comment(this.postId, this.id, this.name, this.email, this.body);    }  

Can you give me any advice? Thank you!

https://stackoverflow.com/questions/65853877/flutter-load-json-in-listview-return-always-empty-data January 23, 2021 at 06:57AM

没有评论:

发表评论