Flutter 錯誤：列表<dynamic>不是 Map 類型的子類型<string, dynamic></string,></dynamic>

Question

如果有人知道如何解決我遇到的這個錯誤，我將不勝感激，我只想使用 API 訪問該網站。 saleTitle 和 saleCode 然后顯示它，所有代碼都在下面，希望這只是我忽略的一個簡單修復

API 供任何想查看數據結構的人在

https://script.googleusercontent.com/macros/echo?user_content_key=Y_qRVeSoWYVdwEEUjYAO42F6aIaQNXocQEXoTFW6doAyqKv5l-_jMLFTVLh40To9roCT2UfJUuF3FYokjPQiYV6f8jDWRg7rm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnIn1TJCxqQfxEAsJc2lSbT1MZbMO8nPyQvnvJosQEZ3HULcKeoNsyQ2_x4lfmdk2Asxlkl-knPMyGGaU2pP6Ntk&lib=MJriFg5Yjkb5Wmz0onstjG7LH4UjpOLQo

或此處的 Json 數據

[{"Website":"www.google.com","SaleTitle":"Up to 50% Off On All Tests!","SaleCode":"No Code Required!"},{"Website":"Website","SaleTitle":"SaleTitle","SaleCode":"SaleCode"}]

Model

/// SaleAlert is a data class which stores data fields of Sale.
class SaleAlert {
  final String website;
  final String saleTitle;
  final String saleCode;

  SaleAlert({this.website, this.saleTitle, this.saleCode});

  factory SaleAlert.fromJson(Map<String, dynamic> json) {
    return SaleAlert(
      website: json['Website'],
      saleTitle: json['SaleTitle'],
      saleCode: json['SaleCode'],
    );
  }
}

屏幕文件

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:healthy_start_app/models/sale.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http/http.dart' as http;

Future<SaleAlert> fetchAlert() async {
  String url =
      'https://script.google.com/macros/s/AKfycbwMcc8DHjHavJayNNJJGdfs0JNkClt3_tanyZ4p91DgcfRO58fi-5yK/exec';
  
  final response = await http.get(url);

  if (response.statusCode == 200) {
    return SaleAlert.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to find latest allergy alert');
  }
}

class SaleTile extends StatefulWidget {
  @override
  _SaleTileState createState() => _SaleTileState();
}

class _SaleTileState extends State<SaleTile> {
  Future<SaleAlert> futureSaleAlert;

  @override
  void initState() {
    super.initState();
    futureSaleAlert = fetchAlert();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
      },
      child: Container(
        width: MediaQuery.of(context).size.width * 0.95,
        height: 100.0,
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            children: [
              FutureBuilder<SaleAlert>(
                future: futureSaleAlert,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(
                      snapshot.data.saleTitle,
                 
                    );
                  } else if (snapshot.hasError) {
                    return Text(
                      snapshot.error.toString(),
                     
                    );
                  }

                  return Text(
                    'Loading...',
                   
                  );
                  ;
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以嘗試使用此代碼，這是您的 API 調用方法

  Future<List<SaleAlert>> fetchAlert() async {
    String url =
        'https://script.google.com/macros/s/AKfycbwMcc8DHjHavJayNNJJGdfs0JNkClt3_tanyZ4p91DgcfRO58fi-5yK/exec';
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final parsed = json.decode(response.body).cast<Map<String, dynamic>>();
      return parsed.map<SaleAlert>((json) => SaleAlert.fromJson(json)).toList();
    } else {
      throw Exception('Failed to find latest allergy alert');
    }
  }

這是你的FutureBuilder

FutureBuilder<List<SaleAlert>>(
          future: fetchAlert(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(
                snapshot.data[0].saleTitle,

              );
            } else if (snapshot.hasError) {
              return Text(
                snapshot.error.toString(),

              );
            }

            return Text(
              'Loading...',

            );
            ;
          },
        ),

並從您的initState()中刪除此行

  @override
  void initState() {
    super.initState();
   // futureSaleAlert = fetchAlert();  <-- remove
  }

我希望你正在尋找這個答案