WebView example

Below example will help you to create a Webview in Flutter, which will load on a Button click. The final App output is going to look as below, ![](https://www.fluttercentral.com/Uploads/6651cd5a-21f6-48f2-abaf-6a046a1414ee.gifwidth="50%height="auto]( 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. 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: #dcdcaa;](runApp(color: #c586c0;](new color: #4ec9b0;](MyApp());} 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: #4ec9b0;](Navigator.color: #dcdcaa;](of(context).color: #dcdcaa;](pushNamed(color: #ce9178;]('/widget'); } 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: () { color: #dcdcaa;](_opennewpage(); } ) , ) ); } } Hope this is helpful. Thanks,Srikanth Related Articles: -> Move to next Tab on Button Click in Flutter font-size: 1rem;]([https://fluttercentral.com/Articles/Post/1054 ]()[https://fluttercentral.com/Articles/Post/1054 ](https://fluttercentral.com/Articles/Post/1054 ); -> List of Cards from a JSON source in Flutterfont-size: 1rem;]( https://fluttercentral.com/Articles/Post/55 -> SliverAppBar Widget in Flutter [https://fluttercentral.com/Articles/Post/51](https://fluttercentral.com/Articles/Post/51)-> Flutter Stepper Widget - Change State in Response to Input font-size: 1rem;]([https://fluttercentral.com/Articles/Post/44](https://fluttercentral.com/Articles/Post/44)