How to build Json 'body' of http call to API

Question

I am trying to contact a GraphQL API and retrieve the data in Flutter

I have a working call in postman giving me the data back.

I have been referred to an example of a working http call but can't get the body to work. I used an encoded version in my postman call but have been advised to un-encode the "data-raw" of my Postman call and pass Json into the query.

I have the main query and then the variable which is the lat/long

A) Is this the correct approach, using pure Json as opposed to encoded like in my postman call (Example below)

    {"query":"query ($lat: Float!, $lng: Float!) {\n  vehicles(lat: $lat, lng: $lng) {\n    id\n...

B) How can I get the query and variable into the Map data = if this is the correct thing to do?

Here is where I am at, using un-encoded Json in Map data = which isn't being accepted and the $lat $long aren't transferred into query from variables

Future<http.Response> showMicroMob () async {

  var url ='https://flow-api.fluctuo.com/v1?access_token=my_token';

  Map data = {
    'query': query ($lat: Float!, $lng: Float!) {
  vehicles (lat: $lat, lng: $lng) {
    id  
    type
    publicId
    provider {
      slug
    }
    lat
    lng
    propulsion
    battery
    attributes
    ... on Station {
      isVirtual
      availableVehicles
      availableStands
      stationVehicleDetails {
        vehicleType
        propulsion
        availableVehicles
      }
      vehicles {
        id
        publicId
        type
        propulsion
        battery
      }
    }
  }
}
    'variables': {"lat":51.492591,"lng":-0.157221}
  };

  //encode Map to JSON
  var body = json.encode(data);

  var response = await http.post(Uri.parse(url),
      headers: {"Content-Type": "application/json"},
      body: body
  );
  print("${response.statusCode}");
  print("${response.body}");
  return response;
}

Original example

Future<http.Response> postRequest () async {
  var url ='https://pae.ipportalegre.pt/testes2/wsjson/api/app/ws-authenticate';

  Map data = {
    'apikey': '12345678901234567890'
  }
  //encode Map to JSON
  var body = json.encode(data);

  var response = await http.post(url,
      headers: {"Content-Type": "application/json"},
      body: body
  );
  print("${response.statusCode}");
  print("${response.body}");
  return response;
}

Update of call

If I shift variable up to make a complete String it no longer recognises the $lat $long fields or the actual lat/long numbers as values and makes them orange text. When I move variables down like in my postman request it of course throws errors, but the numbers are recognised as such ($Lat/$Long still not able to take the value. Tried just hard placing lat/ling figures in and returned

    flutter: 400 flutter: Bad Request

Should I try passing the variables in another way?

Future<http.Response> showMicroMob () async {

  var url ='https://flow-api.fluctuo.com/v1?access_token=x';
    


  var response = await http.post(Uri.parse(url),
      headers: {"Content-Type": "application/json"},
      body: utf8.encode(r'{"query":"query ($lat: Float!, $lng: Float!) {\n  vehicles(lat: $lat, lng: $lng) {\n    id\n    lat\n    lng\n    type\n    publicId\n    attributes\n    propulsion\n    battery\n    provider {\n      name\n      slug\n      website\n      discountCode\n      app {\n        android\n        ios\n        __typename\n      }\n      deepLink {\n        android\n        ios\n        __typename\n      }\n      stationVehicleTypes\n      __typename\n    }\n    pricing {\n      currency\n      unlock\n      perKm {\n        start\n        interval\n        price\n        __typename\n      }\n      perMin {\n        start\n        interval\n        price\n        __typename\n      }\n      perMinPause {\n        start\n        interval\n        price\n        __typename\n      }\n      includeVat\n      __typename\n    }\n    ... on Station {\n      availableVehicles\n      availableStands\n      isVirtual\n      stationVehicleDetails {\n        vehicleType\n        propulsion\n        availableVehicles\n        __typename\n      }\n      __typename\n    }\n    ... on Car {\n      carClass\n      carModel\n      __typename\n    }\n    __typename\n  }\n}\n"
      ,"variables":{"lat":51.492591,"lng":-0.157221}}'));

  print("${response.statusCode}");
  print("${response.body}");
  return response;
}