{"id":11722,"date":"2024-11-15T09:28:12","date_gmt":"2024-11-15T09:28:12","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11722"},"modified":"2024-11-15T09:36:37","modified_gmt":"2024-11-15T09:36:37","slug":"flutter-webview-two-way-communication-with-javascript","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/flutter-webview-two-way-communication-with-javascript","title":{"rendered":"Flutter Webview two-way Communication with Javascript"},"content":{"rendered":"

There are many packages to implement such functionality, but in this example we use flutter_inappwebview package.<\/p>\n

Step 1 : Add dependency to pubspec.yaml<\/h3>\n

flutter_inappwebview: ^6.0.0<\/code><\/p>\n

Step 2 : Create an assets folder in project root directory and create index.html file.<\/h3>\n

Add HTML content inside file.<\/strong><\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n   <meta charset=\"UTF-8\">\r\n   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n   <title>InAppWebView Example<\/title>\r\n   <style>\r\n       body {\r\n           font-family: Arial, sans-serif;\r\n           background-color: #f4f4f4;\r\n           margin: 0;\r\n           padding: 0;\r\n           display: flex;\r\n           justify-content: center;\r\n           align-items: center;\r\n           height: 100vh;\r\n       }\r\n       .container {\r\n           background-color: #fff;\r\n           padding: 20px;\r\n           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n           border-radius: 8px;\r\n           max-width: 400px;\r\n           width: 100%;\r\n           text-align: center;\r\n       }\r\n       h1 {\r\n           color: #333;\r\n           font-size: 24px;\r\n           margin-bottom: 20px;\r\n       }\r\n       input[type=\"number\"] {\r\n           width: 100%;\r\n           padding: 10px;\r\n           margin: 10px 0;\r\n           border: 1px solid #ccc;\r\n           border-radius: 4px;\r\n           font-size: 16px;\r\n       }\r\n       button {\r\n           background-color: #007bff;\r\n           color: white;\r\n           padding: 12px 20px;\r\n           margin-top: 10px;\r\n           border: none;\r\n           border-radius: 4px;\r\n           font-size: 16px;\r\n           cursor: pointer;\r\n           width: 100%;\r\n       }\r\n       button:hover {\r\n           background-color: #0056b3;\r\n       }\r\n       p {\r\n           font-size: 18px;\r\n           margin-top: 20px;\r\n           color: #333;\r\n       }\r\n       .result {\r\n           font-weight: bold;\r\n           color: #007bff;\r\n       }\r\n   <\/style>\r\n   <script type=\"text\/javascript\">\r\n       function callFlutterSum() {\r\n           var num1 = parseInt(document.getElementById(\"num1\").value);\r\n           var num2 = parseInt(document.getElementById(\"num2\").value);\r\n           window.flutter_inappwebview.callHandler('mySum', num1, num2).then(function(result) {\r\n               document.getElementById(\"result\").innerHTML = \"Sum from Flutter: <span class='result'>\" + result + \"<\/span>\";\r\n           });\r\n       }\r\n   <\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n   <h1>InAppWebView Example<\/h1>\r\n   <input type=\"number\" id=\"num1\" placeholder=\"Enter first number\">\r\n   <input type=\"number\" id=\"num2\" placeholder=\"Enter second number\">\r\n   <button onclick=\"callFlutterSum()\">Get Sum from Flutter<\/button>\r\n   <p id=\"result\"><\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    \n
  • Here we added the initial file.<\/li>\n
  • It provides various callbacks onLoadStarted, onLoadStop, OnConsoleMessage and onWebViewCreated.<\/li>\n
  • We are added handler inside onWebViewCreated callback.<\/li>\n
  • We added mySum handler and return value to JavaScript side.<\/li>\n<\/ul>\n
    Output:<\/h3>\n
    \"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
    There are many packages to implement such functionality, but in this example we use flutter_inappwebview package. Step 1 : Add dependency to pubspec.yaml flutter_inappwebview: ^6.0.0 Step 2 : Create an assets folder in project root directory and create index.html file. Add HTML content inside file. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, […]<\/p>\n","protected":false},"author":1,"featured_media":11724,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-11722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11722"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11722"}],"version-history":[{"count":10,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11722\/revisions"}],"predecessor-version":[{"id":11734,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11722\/revisions\/11734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11724"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}