How do you add query parameters to a Dart http request?

Question

How do you correctly add query parameters to a Dart http get request? I been unable to get my request to respond correctly when trying to append the '?param1=one&param2=two' to my url, yet it works correctly in Postman. Here's the gist of my code:

    final String url = "https://www.myurl.com/api/v1/test/";
    String workingStringInPostman = "https://www.myurl.com/api/v1/test/123/?param1=one&param2=two";

    Map<String, String> qParams = {
     'param1': 'one',
     'param2': 'two',
    };


   var res = await http
      .get(Uri.encodeFull("$url${widget.pk}/"),
      headers: {HttpHeaders.authorizationHeader: "Token $token", 
        HttpHeaders.contentTypeHeader: "application/json"},
);

The ${widget.pk} is simply a integer value being pass (See the value 123 in the workingStringInPostman variable.

The qParams is there for connivence, in case a Uri parameter is needed.

A code example would be welcomed.

Solution 1

You'll want to construct a Uri and use that for the request. Something like

final queryParameters = {
  'param1': 'one',
  'param2': 'two',
};
final uri =
    Uri.https('www.myurl.com', '/api/v1/test/${widget.pk}', queryParameters);
final response = await http.get(uri, headers: {
  HttpHeaders.authorizationHeader: 'Token $token',
  HttpHeaders.contentTypeHeader: 'application/json',
});

See https://api.dartlang.org/stable/2.0.0/dart-core/Uri/Uri.https.html

Solution 2

If you dont want to override the scheme of base endpoint url, use the below technique to convert the map to query string and append it to the base endpoint url

var endpointUrl = 'https://www.myurl.com/api/v1/user';
Map<String, String> queryParams = {
  'param1': '1',
  'param2': '2'
};

var headers = {
  HttpHeaders.authorizationHeader: 'Token $token',
  HttpHeaders.contentTypeHeader: 'application/json',
}

String queryString = Uri.parse(queryParameters: queryParams).query;

var requestUrl = endpointUrl + '?' + queryString; // result - https://www.myurl.com/api/v1/user?param1=1&param2=2
var response = await http.get(requestUrl, headers: headers);

Solution 3

this is more simple

final uri = Uri.parse('$baseUrl/v1/endpoint').replace(queryParameters: {
      'page': page,
      'itemsPerPage': itemsPerPage,
    });
final response = await client.get(uri);

Solution 4

Got the same question. The accepted answer won't work if my url is localhost with port like https://localhost:5001. After spending 1 day to search for solution, I come up with Dio library. Following is my solution using Dio:

var _dio = new Dio();
var options = new Options;
options.headers['Authorization'] = 'bearer $token';
options.contentType = 'application/json';
String url = "https://www.myurl.com";
Map<String, String> qParams = {
  'param1': 'one',
  'param2': 'two',
};

var res = await _dio.get(url, options: options, queryParameters: qParams);

Hope this helps.

Solution 5

Use Uri to pass query parameters like.

final String url = "https://www.myurl.com/api/v1/test/${widget.pk}/";

Map<String, String> qParams = {
 'param1': 'one',
 'param2': 'two',
};
Map<String, String> header = {
HttpHeaders.authorizationHeader: "Token $token", 
    HttpHeaders.contentTypeHeader: "application/json"
};

Uri uri = Uri.parse(url);
final finalUri = uri.replace(queryParameters: qParams); //USE THIS

final response = await http.get(
  finalUri,
  headers: header,
);

View more solutions

Comments

[Peter Birdsall]

The splitting up of the host and path was the answer.

[Muthu S]

what is widget.pk here

[Pablo]

for some reason, the application stops after Uri.https like an exception, but without error, it just stops.

[Tuan van Duong]

Got error if the url is local host with port like localhost:5001.

[SardorbekR]

Most simple and best solution)

[s.j]

getting this error still - Unhandled Exception: NoSuchMethodError: The method '[]' was called on null. E/flutter (12741): Receiver: null E/flutter (12741): Tried calling: []("BankName")

[s.j]

can you suggest any solution?

[s.j]

not working for local address define path of api

[Nate Bosch]

To create a URI for a localhost address. Uri.http('localhost:5001', '/api/v1/whatever', {'param1': 'one'}). If you are hitting issues with https and localhost it could be a certificate issue.

[Ojonugwa Jude Ochalifu]

Unfortunately, this doesn't work anymore. An error is thrown at http.get(requestUrl....) The argument type 'String' can't be assigned to the parameter type 'Uri'.

[Jaidyn Belbin]

@OjonugwaJudeOchalifu just wrap the String in Uri.parse().

[Stack Underflow]

In order to get a response as a List<String>, I had to do _dio.get<List<dynamic>>(...).data.cast<String>();. If somebody knows a better way, feel free to let me know.

[Stack Underflow]

It should be options.headers = {'Authorization': 'bearer $token'};

[ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ]

this is very easy for the HTTP package not for the Dio package.