Flutter Webview Post form data - flutter

I am trying to integrate PayGoal payment integration in flutter app. I have to send data in form of form data .
I have also tried using dio through which I am getting html file in response which on rendering web view is not live .
Below is my Code
WebView(
javascriptMode: JavascriptMode.unrestricted,
debuggingEnabled: false,
onWebResourceError: (error) {
debugPrint(error.domain);
print(error);
},
zoomEnabled: true,
backgroundColor: Colors.transparent,
gestureNavigationEnabled: true,
onWebViewCreated: (controller) {
controller.loadRequest(
WebViewRequest(
uri: Uri.parse("https://uat.paygoal.in/order/v1/payment"),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
method: WebViewRequestMethod.post,
body: Uint8List.fromList(
utf8.encode(
jsonEncode(map),
),
),
),
);
},
),

You have to send body in byte code simply convert map to string and remove json encode then send the post request

Related

How to add circular indicator to webview in flutter

i am new here. Please forgive me if I make a mistake. I'm trying to make a payment screen. But I can't solve a small problem. I couldn't understand the cause of the problem. when i click to 'start payment' button it's show me that screen about 2 second.And it's look bad. Bad View
But good news it's skip automatically normal payment screen. How can I show something else(Circular progress indicator, Lineer progres indicator etc.) on the screen instead of that String? My codes are below;
if (data['Status'] != "failure") {
Navigator.of(context).push(MaterialPageRoute(
builder: ((context) => CoreWebView(
htmlCode: data['paymentUrl'],
))));
}
It's my WebView
WebViewPlus(
initialUrl: "https://example.com",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
//widget.html==data['paymentUrl'];
var page = 'r"""${widget.htmlCode}"""';
controller.loadString(page);
},
zoomEnabled: false,
),
Make your widget a StatefulWidget.
Add a variable as bool isLoading = true;.
Change your code as:
Stack(
children: [
WebViewPlus(
onPageFinished: (url) {
setState(() {
isLoading = false;
});
},
initialUrl: "https://example.com",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
//widget.html==data['paymentUrl'];
var page = 'r"""${widget.htmlCode}"""';
controller.loadString(page);
},
zoomEnabled: false,
),
if(isLoading)
Center(child: CircularProgressIndicator()
)
],
),

Null check operator used on a null value Error in reload webview

Please I'm working on a flutter WebView project and I need to reload my page if I click a button but it gave me this Error : Null check operator used on a null value. Thank you in advance
this is my code :
WebView(
initialUrl: "https://wikoget.com",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
_controller.complete(webViewController);
},
onPageFinished: (String url) {
_webViewController
.evaluateJavascript("javascript:(function() { " +
"var head = document.getElementsByClassName('main-header-bar-wrap')[0];" +
"head.parentNode.style.cssText = ' position: sticky;position: -webkit-sticky; top : 0 ';" +
"var footer = document.getElementsByTagName('footer')[0];" +
"footer.parentNode.removeChild(footer);" +
"})()")
.then((value) => debugPrint('Page finished loading Javascript'));
},
onWebResourceError: (error) => setState(() {
isError = true;
}),
),
if (isError)Center(
child :RaisedButton(
padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 30),
onPressed: ()=> _webViewController.reload(),
color: Color(int.parse("0xff135888")),
shape:const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
child:const Text("Réessayez",style: TextStyle(color:Colors.white),)
),
],
),
),
Although your code is incomplete, here's what you need to make your webview reload easily.
Create a webview controller and initialize it when the webview is created to the controller of the webview:
WebViewController? webViewController;
.
.
.
onWebViewCreated: (controller){
webViewController = controller;
}
reload when your button is pressed:
onPressed: () {
webViewController!.reload();
},
Click here to read more about making your webview work excellently

Popup is not working in Flutter Web VIew package

I am using 'flutter_webview' package for payment the web view working fine. but on payment its open new popup, that popup is working in other external browser but not in mobile view.
please guide me to handle the popup in webview.
Expanded(
child: WebView(
debuggingEnabled: true,
initialUrl: paymentUrl,
allowsInlineMediaPlayback: true,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
onWebResourceError: (WebResourceError webviewerrr) {
print("Handle your Error Page here");
},
javascriptChannels: Set.from([
JavascriptChannel(
name: 'Alert',
onMessageReceived: (JavascriptMessage message) {
// alert message = Test alert Message
print(message.message);
// TODO popup
},
)
]),
),
),
I found the solution, while using the razor pay we have to integrate razorpay_flutter package instead of going with the webview_flutter

Flutter handle on click events in Webview

I am trying to build webview in my mobile application
In the webview when click on search all the records to particular time period are shown it works but when click on Export To Excel button it should download the excel sheet but nothing works in my application..
Below is the code what I have done
Thanks for help!![enter image description here][1]
PS: URL hidden for security reasons..
`
Stack(
children: [
Container(
padding: EdgeInsets.all(10.0),
child: progress < 1.0
? LinearProgressIndicator(
value: progress,
backgroundColor: Colors.amber,
)
: Container()),
WebView(
initialUrl:
"URL",
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onWebViewCreated: (WebViewController controller) {
_webViewController = controller;
},
onProgress: (int progress) {
setState(() {
this.progress = progress / 100;
});
},
onPageFinished: (finish) {
setState(
() {
isLoading = false;
},
);
},
),
],
),
Use navigationDelegate parameter in Webview constructor.
WebView(
initialUrl: 'https://google.com',
navigationDelegate: (action) {
if (action.url.contains('mail.google.com')) {
print('Trying to open Gmail');
Navigator.pop(context); // Close current window
return NavigationDecision.prevent; // Prevent opening url
} else if (action.url.contains('youtube.com')) {
print('Trying to open Youtube');
return NavigationDecision.navigate; // Allow opening url
} else {
return NavigationDecision.navigate; // Default decision
}
},
),
That's it. Enjoy coding!

How to automatically return back to Flutter app after user completes a web form

I am developing a toll-payment mobile application with Flutter and I need to provide an internet payment (with bank's IPG page) for user to pay her/his toll debt.
What exactly I need is to automatically return back to my Flutter app after user finishes the form and taps on submit button.
How to do that?
This may be too late, but you can use Uni Links package to define a URI scheme like: my_great_app://open to be called by your web form to return to the app. That package works for both Android and iOS, and you can define both Deep link or App link, based on your criteria. Most apps use the simpler Deep links for that purpose.
There are also other packages in pub.dev to do that, search "App Link" or "Universal Link" to find more.
This is the code I used in my app for flutterwave payment gateway
Expanded(
child: Stack(
children: [
WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: selectedUrl,
gestureNavigationEnabled: true,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E233 Safari/601.1',
onWebViewCreated: (WebViewController webViewController) {
_controller.future.then((value) => controllerGlobal = value);
_controller.complete(webViewController);
},
onPageStarted: (String url) {
if(url.contains(AppConstants.BASE_URL)) {
bool _isSuccess = url.contains('success');
bool _isFailed = url.contains('fail');
print('Page started loading: $url');
setState(() {
_isLoading = true;
});
if (_isSuccess) {
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
showAnimatedDialog(context, MyDialog(
icon: Icons.done,
title: getTranslated('payment_done', context),
description: getTranslated('your_payment_successfully_done', context),
), dismissible: false, isFlip: true);
} else if (_isFailed) {
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
showAnimatedDialog(context, MyDialog(
icon: Icons.clear,
title: getTranslated('payment_failed', context),
description: getTranslated('your_payment_failed', context),
isFailed: true,
), dismissible: false, isFlip: true);
} else if (url == '${AppConstants.BASE_URL}/cancel') {
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
showAnimatedDialog(context, MyDialog(
icon: Icons.clear,
title: getTranslated('payment_cancelled', context),
description: getTranslated('your_payment_cancelled', context),
isFailed: true,
), dismissible: false, isFlip: true);
}
}
},
onPageFinished: (String url) {
print('Page finished loading: $url');
setState(() {
_isLoading = false;
});
},
),