API 数据显示 - flutter 卡片小部件

Question

Get API connection is successful. but I have no idea how to map data.. how is connect snapshot.data, I want to display data in a Stack widget.

https://flutter.dev/docs/cookbook/networking/fetch-data

I learned this from the association with this source

Future<News> fetchNews() async {
  final response =
  await http.get('#url');
  print(response.body);

  if (response.statusCode == 200) {
    return News.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load news');
  }
}

class News {
  final String title;
  final String description;
  final String image;

  News({this.title, this.description, this.image});

  factory News.fromJson(Map<String, dynamic> json) {
    return News(
      title: json['title'],
      description: json['description'],
      image: json['image'],
    );
  }
}

  Widget _buildPage(BuildContext context, int direction) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: FutureBuilder<News>(
        future: futureNews,
          builder: (context, snapshot) {
          if (snapshot.hasData) {
            return newsCard(snapshot.data);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
      },
    ),
    );
  }

  Widget newsCard(size){
    return Stack(
      children: <Widget>[
        Container(
          child: Image.network(
              image,
              fit: BoxFit.cover
          ),
          height: size.height/2.0,
        ),
        ),
      ],
    );
  }

Answer 1

Your code is a bit messy and it doesn't make much sense. It seems obvious that the data is not getting displayed because you're passing your News object to your newsCard function, but the parameter seems to be expecting Size . I also don't know where are you getting the image property from since it doesn't seem to be declared anywhere in the code.

Doing some changes to your code, a minimal working function that returns your widget would look like this:

Widget _buildPage(BuildContext context, int direction) {
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: FutureBuilder<News>(
        future: futureNews,
          builder: (context, snapshot) {
          if (snapshot.hasData) {
            return newsCard(snapshot.data, size);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
      },
    ),
    );
  }

  Widget newsCard(News news, Size size){
    return Stack(
      children: <Widget>[
        Container(
          child: Image.network(
              news.image,
              fit: BoxFit.cover
          ),
          height: size.height/2.0,
        ),
        ),
      ],
    );
  }

UPDATE

If you're getting the error you mentioned bellow, is likely that your response from the get request is a list of News and not just one News object, therefore you'll have to change this:

return News.fromJson(jsonDecode(response.body));

To this:

return jsonDecode(response.body).map<News>((object) => News.fromJson(object)).toList();

The return type of fetchNews() should be Future<List<News>> instead of Future<News>