How to Post Data to URL in Flutter WebView
Solution 1
webview_flutter
doesn't have a method to send post requests at this moment.
However, you can try my flutter_inappwebview plugin. It supports POST requests!
A simple example using the current latest version 5.0.5+3
of the flutter_inappwebview plugin is:
var postData = Uint8List.fromList(utf8.encode("firstname=Foo&lastname=Bar"));
controller.postUrl(url: Uri.parse("https://example.com/my-post-endpoint"), postData: postData);
where the postData
is the Body of the request in x-www-form-urlencoded
format.
For example, if you have a PHP server, you can access the firstname
and lastname
values as you normally would do, that is $_POST['firstname']
and $_POST['lastname']
.
You can also initialize the InAppWebView
widget with an initial POST request like this:
child: InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse("https://example.com/my-post-endpoint"),
method: 'POST',
body: Uint8List.fromList(utf8.encode("firstname=Foo&lastname=Bar")),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
),
onWebViewCreated: (controller) {
},
),
Solution 2
You can run JS functions on official Flutter WebView ::
1-Example of Post request by JS
**
* sends a request to the specified url from a form. this will change the window location.
* @param {string} path the path to send the post request to
* @param {object} params the parameters to add to the url
* @param {string} [method=post] the method to use on the form
*/
function post(path, params, method='post') {
// The rest of this code assumes you are not using a library.
// It can be made less verbose if you use one.
const form = document.createElement('form');
form.method = method;
form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
2-Convert JS function to a String in Flutter and Call that
final String postUrl="'https://jsonplaceholder.typicode.com/posts'";
final String postParam= "{name: 'Johnny Bravo'}";
final String requestMethod= "'post'";
final String jsFunc="function post(path, params, method='post') {"+
"const form = document.createElement('form');"+
"form.method = method;"+
"form.action = path;"+
"for (const key in params) {"+
"if (params.hasOwnProperty(key)) {"+
"const hiddenField = document.createElement('input');"+
"hiddenField.type = 'hidden';"+
"hiddenField.name = key;"+
"hiddenField.value = params[key];"+
"form.appendChild(hiddenField);}}document.body.appendChild(form);form.submit();}"+
"post($postUrl, $postParam, method=$requestMethod)";
3- Run JS code in WebView
return FutureBuilder<WebViewController>(
future: _controller.future,
builder: (BuildContext context,
AsyncSnapshot<WebViewController> controller) {
if (controller.hasData) {
return FloatingActionButton(
onPressed: () async {
controller.data!.evaluateJavascript(jsFunc);
},
child: const Icon(Icons.call_received),
);
}
return Container();
});
Comments
-
Santo Shakil over 1 year
I want to post some data to the URL body in Flutter WebView. So, how can I do it?