Search code examples
flutterdartflutter-httpdart-http

Fetch data from internet with flutter but failed to show data

I tried following the flutter doc from text but failed to show the data, I suspect the problem is in the futureBuilder, haven't implement try-catch yet as I'm not sure what to call. Also when I use late Future futurePrayer; at the class declaration level, the data show but with call error. but if I use late Future<Prayer> futurePrayer; with class type annotation the error dissapear but not show the data error image : error image is just for showing data example

error image is just for showing data example

code : builder function

FutureBuilder(
              future: futurePrayer,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                // TODO: fix NoSuchMethodError: 'call
                // Dynamic call of object has no instance method 'call'.
                return Text(snapshot.data.ashar());
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }

              // By default, show a loading spinner.
              return const CircularProgressIndicator();
              }
            ),

ApiBaseHelper / getter

Future<Prayer> ApiBaseHelper() async {
  final response = await http
      .get(Uri.parse('https://api.myquran.com/v2/sholat/jadwal/1420/2025-01-05'));

  
  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Prayer.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    await ApiBaseHelper().catchError(print);
    throw Exception('Failed to load album');
  }
}

Prayer data class

// this class is not used yet
class PrayerResponse {
  List<String>? prayerTime;

  PrayerResponse({
    required this.prayerTime,
  });
  PrayerResponse.fromJson(Map<String, dynamic> json) {
    prayerTime = json['data']['jadwal'];
  }
}

class Prayer {
  final int id;
  final String lokasi;
  final String  daerah;
  final String  ashar;

  Prayer(
    {
      required this.id,
      required this.lokasi,
      required this.daerah,
      required this.ashar,
    }
  );
  factory Prayer.fromJson(Map<String, dynamic> json) {
    return Prayer(
      id : json['data']['id'],
      lokasi : json['data']['lokasi'],
      daerah : json['data']['daerah'],
      ashar : json['data']['jadwal']['ashar'],
    );
  }
}
Solution

  • When I examined your code in general, one thing caught my attention. You are using a function sign () on the data coming from the future. I think this may cause the problem. Also, using a try catch block when making a request to the API may be more helpful in finding the source of the error.

    You can try these codes for solution.

    FutureBuilder<Prayer>(
  future: futurePrayer,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else if (snapshot.hasData) {
      return Text('Ashar Time: ${snapshot.data!.ashar}');
    } else {
      return const Text('No data available');
    }
  },
),

 Future<Prayer> ApiBaseHelper() async {
          try {
            final response = await http.get(
              Uri.parse('https://api.myquran.com/v2/sholat/jadwal/1420/2025-01-05'),
            );
        
            if (response.statusCode == 200) {
              return Prayer.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
            } else {
              throw Exception('Failed to load prayer data');
            }
          } catch (e) {
            throw Exception('Error fetching data: $e');
          }
        }