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: #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: () ) , ) ); } }
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 ; -> 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-> Flutter Stepper Widget - Change State in Response to Input font-size: 1rem;](https://fluttercentral.com/Articles/Post/44
