API 數據顯示 - flutter 卡片小部件

Question

獲取API 連接成功。 但我不知道如何 map 數據.. 如何連接 snapshot.data，我想在 Stack 小部件中顯示數據。

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

我從與此來源的關聯中了解到這一點

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

你的代碼有點亂，沒有多大意義。 很明顯，數據沒有顯示，因為您將News object 傳遞給您的newsCard function，但參數似乎是Size 。 我也不知道你從哪里得到image屬性，因為它似乎沒有在代碼中的任何地方聲明。

對您的代碼進行一些更改，返回您的小部件的最小工作 function 將如下所示：

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,
        ),
        ),
      ],
    );
  }

更新

如果您收到您在下面提到的錯誤，很可能您對獲取請求的響應是News列表，而不僅僅是一個News object，因此您必須更改此：

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

對此：

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

fetchNews()的返回類型應該是Future<List<News>>而不是Future<News>