Flutter 无法得到 API 的回复

Question

im quite new in flutter and i wanted to build a Reciep app with Edamam Api, but when i tried to print a response, i didnt get any response and showing nothing in my debug console. i didnt know what did i do wrong since there's now error in my code.

so here is my Homepage code

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:medreminder/Recipe/recipe_model.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class RecipeHomePage extends StatefulWidget {
  const RecipeHomePage({super.key});

  @override
  State<RecipeHomePage> createState() => _RecipeHomePageState();
}

class _RecipeHomePageState extends State<RecipeHomePage> {
  
  List<RecipeModel> list = <RecipeModel>[];
  final url = "https://api.edamam.com/search?q=chicken&app_id=28c786ea&app_key=318f03b71e4911e96b70feaedf22a72e&from=0&to=3&calories=591-722&health=alcohol-free";
  getAPiData()  async{
    var response = await http.get(Uri.parse(url));
    Map json = jsonDecode(response.body);
    print(response.body);
      
  @override
  void initState() {
    // TODO: implement initState
    getAPiData();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Get.isDarkMode?lightGreyColor:Colors.grey[700],
        elevation: 0,
        title: Text("Healthy Food Recipe"),
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20)
                ),
                fillColor: lightGreyColor.withOpacity(0.02),
                filled: true,
              ),
            ),
            SizedBox(height: 15),
            GridView.builder(
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, crossAxisSpacing: 5, mainAxisSpacing: 5), 
              itemCount: list.length,
              itemBuilder: (context, i){
              final x = list[i];
              return Column(
                children: [
                  Card(
                    child: Image.network(x.image.toString()),
                  )
                ],
              );
            })
          ],
        ),
      ),
    );
  }
}

and here is my model class

class RecipeModel{
  String? image;
  String? url;
  String? source;
  String? label;

  RecipeModel({this.image, this.url, this.source, this.label});
}

any help would mean so much to me. thankyou guys

Answer 1

As per my understanding, you are getting errors. Reason: there is an ending bracket missing in your getAPIData() method.

Please have a look at below getAPiData() method for better understanding.

getAPiData() async {
    var response = await http.get(Uri.parse(url));
    Map json = jsonDecode(response.body);
    print(response.body);
}

Answer 2

Maybe it'll help you, it's not proper solution.

As per my finding, something wrong with your API URL. When I hit the other API URL it works.

check with the below dart pad URL

https://dartpad.dev/?id=5bd700b8a436ea4fd7443844b1a1c4e3

Answer 3

I run the app one more time, and its finally showing an error message. and it says that i got the API ID wrong, i use a different API ID for different API in my endpoint.