WebView example

This Article is posted by seven.srikanth at 8/22/2018 9:02:19 AM



<p>Below example will help you to create a Webview in Flutter, which will load on a Button click.</p> <p>The final App output is going to look as below,</p> <p>![](https://www.fluttercentral.com/Uploads/6651cd5a-21f6-48f2-abaf-6a046a1414ee.gifwidth="50%height="auto](</p> <p>Once the New Project is created you need to add the below flutter_webview_plugin package into the pubspec.yaml file. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](font-size: 14px; white-space: pre; color: rgb(86, 156, 214);](flutter_webview_pluginfont-size: 14px; white-space: pre;](: font-size: 14px; white-space: pre; color: rgb(206, 145, 120);](^0.3.0+2 And then Save to get the Packages. One the Packages are updated, add the below code to yourfont-size: 1rem;]( main.dart code file in lib folder and run the program.</p> <p id="dcdcaa;](opennewpage();" color:="" color:="">color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';color: #569cd6;](import color: #ce9178;]('package:flutter_webview_plugin/flutter_webview_plugin.dart'; color: #569cd6;](void color: #dcdcaa;](main() color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](var title = color: #ce9178;]('Webview Demo'; color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](MaterialApp( title: title, routes: { color: #ce9178;]('/widget': () => color: #c586c0;](new color: #4ec9b0;](WebviewScaffold( url: color: #ce9178;]("https:color: #d7ba7d;](\color: #ce9178;](FlutterCentral.com", appBar: color: #c586c0;](new color: #4ec9b0;](AppBar( title: color: #569cd6;](const color: #4ec9b0;](Text(color: #ce9178;]('Widget Webview'), ), withZoom: color: #569cd6;](false, withLocalStorage: color: #569cd6;](true, ) }, home: color: #c586c0;](new color: #4ec9b0;](MyAppHomePage(), ); }} color: #569cd6;](class color: #4ec9b0;](MyAppHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();} color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](void color: #dcdcaa;](_opennewpage() color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Sample App"), ), body: color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](RaisedButton( child: color: #4ec9b0;](Text(color: #ce9178;]('Open Link'), onPressed: () ) , ) ); } }</p> <p>Hope this is helpful. Thanks,Srikanth Related Articles: -> Move to next Tab on Button Click in Flutter font-size: 1rem;](<a href="">https://fluttercentral.com/Articles/Post/1054 </a><a href="https://fluttercentral.com/Articles/Post/1054">https://fluttercentral.com/Articles/Post/1054 </a>; -> List of Cards from a JSON source in Flutterfont-size: 1rem;]( <a href="https://fluttercentral.com/Articles/Post/55">https://fluttercentral.com/Articles/Post/55</a> -> SliverAppBar Widget in Flutter <a href="https://fluttercentral.com/Articles/Post/51">https://fluttercentral.com/Articles/Post/51</a>-> Flutter Stepper Widget - Change State in Response to Input font-size: 1rem;](<a href="https://fluttercentral.com/Articles/Post/44">https://fluttercentral.com/Articles/Post/44</a></p>


Tags: WebView example in Flutter; Webviw in flutter; web view in flutter; web view example; web view in mobile development; load website in mobile app;








2 Comments
Login to comment.
Recent Comments

obozhdi at 1/28/2019

This shit wont work.

Login to Reply.

seven.srikanth at 3/5/2019

Hi Obozhdi, I've rechecked the program and its running fine. However, I have observed there will be a slight confusion in the way it is written and it is corrected now.