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.

score 202 · Accepted Answer · edited Feb 03 '23 at 14:54

202

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', 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

edited Feb 03 '23 at 14:54

Tom Raganowicz

2,169
5
27
41

answered Oct 15 '18 at 20:48

Nate Bosch

10,145
2
26
22

2

The splitting up of the host and path was the answer. – Peter Birdsall Oct 16 '18 at 21:02
23

what is widget.pk here – IamVariable Jul 09 '19 at 03:25
3

for some reason, the application stops after `Uri.https` like an exception, but without error, it just stops. – Pablo Aug 23 '19 at 10:56
2

Got error if the url is local host with port like `localhost:5001`. – Tuan van Duong Nov 02 '19 at 05:51
1

not working for local address define path of api – s.j Feb 12 '21 at 11:14
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. – Nate Bosch Feb 13 '21 at 19:02

Nandhakumar Appusamy · Answer 2 · 2021-11-20T14:10:41.393

37

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);

edited Nov 20 '21 at 14:10

answered Oct 23 '20 at 12:45

Nandhakumar Appusamy

1,156
13
22

4

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'.` – Ojonugwa Jude Ochalifu Jun 06 '21 at 20:41
3

@OjonugwaJudeOchalifu just wrap the String in Uri.parse(). – Jaidyn Belbin Aug 27 '21 at 06:22
1

I don't see any parameter `queryParameters` of Uri.parse – trinalbadger587 Dec 23 '22 at 09:06
Parameter `queryParameters` does not exists in `Uri.parse()` – Eric Valero Jan 27 '23 at 10:48

score 37 · Answer 3 · edited Apr 13 '22 at 21:06

37

this is more simple

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

edited Apr 13 '22 at 21:06

jaredbaszler

3,941
2
32
40

answered Aug 30 '21 at 17:31

Gemu

409
4
4

this is very easy for the HTTP package not for the Dio package. – ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ Apr 05 '22 at 04:51
Doesn't work properly it adds only the first two query params – Kristi Jorgji Oct 18 '22 at 13:13

Tuan van Duong · Answer 4 · 2019-11-02T09:42:53.477

8

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.

edited Nov 02 '19 at 09:42

answered Nov 02 '19 at 05:47

Tuan van Duong

185
4
14

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 Nov 09 '20 at 10:57
can you suggest any solution? – s.j Nov 09 '20 at 11:00
In order to get a response as a `List`, I had to do `_dio.get>(...).data.cast();`. If somebody knows a better way, feel free to let me know. – Stack Underflow Oct 21 '21 at 20:21
It should be `options.headers = {'Authorization': 'bearer $token'};` – Stack Underflow Nov 04 '21 at 21:57

score 6 · Answer 5 · answered Sep 29 '20 at 10:59

Use Uri constructor to build your query, it has a queryParameter property.

var uri = Uri(
  scheme: 'https',
  host: 'example.com',
  path: '/foo/bar',
  fragment: 'baz',
  queryParameters: _yourQueryParameters,
);

var response = await http.get(uri);
if (response.statusCode == 200) {
  var json = jsonDecode(response.body);
  // Do whatever you want to do with json. 
}

score 6 · Answer 6 · answered Mar 22 '21 at 15:23

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,
);

score 4 · Answer 7 · answered Oct 19 '19 at 17:00

4

The accepted answer didn't work for me but adding a '&' without quotes to end of the URL solves my problem. In this case, change the following line:

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

to this: (Notice the '&' at the end).

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

answered Oct 19 '19 at 17:00

Soroosh Sharif

75
1
9

Most simple and best solution) – SardorbekR Sep 30 '20 at 11:38

score 2 · Answer 8 · answered Jul 16 '19 at 08:06

There is a dart package that provides some helper classes for http requests.

BasicUtils : https://github.com/Ephenodrom/Dart-Basic-Utils

Install it with:

dependencies:
  basic_utils: ^1.4.0

Usage

You can add a map of headers and query parameters to each request. See the example :

// Define some headers and query parameters
Map<String, String> headers = {
  "Accept": "application/json"
};
Map<String, String> queryParameters = {
  "foo": "bar"
};

// Body
String body = "{ 'some':'json'}";

// Send request
Map<String, dynamic> responseData = await HttpUtils.postForJson("api.com/dosomething", body,
      headers: headers, queryParameters: queryParameters);

Additional information :

These are all methods from the HttpUtils class.

Future<Map<Response> getForFullResponse(String url,{Map<String, dynamic> queryParameters,Map<String, String> headers});
Future<Map<String, dynamic>> getForJson(String url,{Map<String, dynamic> queryParameters,Map<String, String> headers});
Future<String> getForString(String url,{Map<String, dynamic> queryParameters,Map<String, String> headers});
Future<Map<Response> postForFullResponse(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<Map<String, dynamic>> postForJson(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<String> postForString(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<Response> putForFullResponse(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<Map<String, dynamic>> putForJson(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<String> putForString(String url, String body,{Map<String, String> queryParameters,Map<String, String> headers});
Future<Response deleteForFullResponse(String url,{Map<String, String> queryParameters,Map<String, String> headers});
Future<Map<String, dynamic>> deleteForJson(String url,{Map<String, String> queryParameters,Map<String, String> headers});
Future<String> deleteForString(String url,{Map<String, String> queryParameters,Map<String, String> headers});
Map<String, dynamic> getQueryParameterFromUrl(String url);
String addQueryParameterToUrl(String url, Map<String, dynamic> queryParameters);

score 1 · Answer 9 · answered Jan 12 '22 at 17:50

The following function copied from flutter code can be used to create the query string part only:

String queryString(Map<String, dynamic> queryParameters) {
  var result = StringBuffer();
  var separator = "";

  void writeParameter(String key, String? value) {
    result.write(separator);
    separator = "&";
    result.write(Uri.encodeQueryComponent(key));
    if (value != null && value.isNotEmpty) {
      result.write("=");
      result.write(Uri.encodeQueryComponent(value));
    }
  }

  queryParameters.forEach((key, value) {
    if (value == null || value is String) {
      writeParameter(key, value);
    } else {
      Iterable values = value;
      for (String value in values) {
        writeParameter(key, value);
      }
    }
  });
  return result.toString();
}

Usage:

var q = queryString({"a":"b&", "c":["1","xyz"]});
// a=b%26&c=1&c=xyz

score 0 · Answer 10 · answered Feb 18 '21 at 22:10

I made a little util function which resolves the authority / unencodedPath parameters for Uri creation.

Uri createUri(String url, [Map<String, String> queryParameters]) {
  var isHttp = false;
  if (url.startsWith('https://') || (isHttp = url.startsWith('http://'))) {
    var authority = url.substring((isHttp ? 'http://' : 'https://').length);
    String path;
    final index = authority.indexOf('/');

    if (-1 == index) {
      path = '';
    } else {
      path = authority.substring(index);
      authority = authority.substring(0, authority.length - path.length);
    }

    if (isHttp) {
      return Uri.http(authority, path, queryParameters);
    } else {
      return Uri.https(authority, path, queryParameters);
    }
  } else if (url.startsWith('localhost')) {
    return createUri('http://' + url, queryParameters);
  }

  throw Exception('Unsupported scheme');
}

Here is the example code which uses it:

final String url = 'https://www.myurl.com/api/v1/test/${widget.pk}';
Map<String, String> qParams = {
  'param1': 'one',
  'param2': 'two',
};

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

score 0 · Answer 11 · answered Dec 24 '22 at 14:11

  final uri = Uri.parse("${ApiConstants.baseUrl}/blog/post/blog-post-list");
  uri.replace(queryParameters: {"location": location});
  final Response response = await _apiRepository.getApi(uri);
  if (response.statusCode == 200 || response.statusCode == 201) {
    final content = await jsonDecode(response.body);
    final data = await content["data"] as List;
    List<PostModel> list = [];
    for (var i in data) {
      final postModel = PostModel.fromJson(i);
      list.add(postModel);
    }

this works as of today

score 0 · Answer 12 · answered Apr 12 '23 at 05:24

This is worked for me.

  _init() async {
    DateTime endDate = DateTime.now();
    DateTime startDate = endDate.subtract(Duration(days: 30 * 11));
    var response = await Api.get(
        "mover/dashboard/column-chart?start=$startDate&end=$endDate");
    if (response.statusCode == 200) {
      var json = jsonDecode(response.body);
      if (mounted) {
        setState(() {});
      }
    }
  }

Api.dart

  static Future<http.Response> get(path) async {
    String? token = await Store.read('token');
    try {
      var response = await http.get(
        Uri.parse('$basePath/api/moving/$path'),
        headers: {
          'Authorization': 'Bearer $token',
          'Content-Type': 'application/json'
        },
      );
      return response;
    } catch (err) {
      return http.Response('${err.toString()}', 400);
    }
  }

score -1 · Answer 13 · answered Feb 26 '22 at 09:56

-1

U can use this:

String _getParamsFromBody( Map<String, dynamic>? body) {
String params = '?';
for (var i = 0; i < body!.keys.length; i++) {
  params += '${List.from(body!.keys)[i]}=${List.from(body!.values)[i]}';
  if (i != body!.keys.length - 1) {
    params += '&';
  }
}
log(params);
return params;

}

Uri.parse("https://www.myurl.com/api/v1/test"+ _getParamsFromBody({'param1':'value1','param2':'value2}))

answered Feb 26 '22 at 09:56

Abdelrahman Tareq

1,874
3
17
32

Beware! This approach does NOT escape the query parameters – Simon Dec 09 '22 at 08:20

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

13 Answers13

Linked