WebView example

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



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,
Once the New Project is created you need to add the below flutter_webview_plugin package into the pubspec.yaml file.
flutter_webview_plugin: ^0.3.0+2
And then Save to get the Packages.
One the Packages are updated, add the below code to your main.dart code file in lib folder and run the program.
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var title = 'Webview Demo';
return new MaterialApp(
title: title,
routes: {
'/widget': (_) => new WebviewScaffold(
url: "https:\\FlutterCentral.com",
appBar: new AppBar(
title: const Text('Widget Webview'),
),
withZoom: false,
withLocalStorage: true,
)
},
home: new MyAppHomePage(),
);
}
}
class MyAppHomePage extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppHomePage> {
void _opennewpage() {
Navigator.of(context).pushNamed('/widget');
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: new Center(
child: new RaisedButton(
child: Text('Open Link'),
onPressed: () {
_opennewpage();
}
) ,
)
);
}
}
Hope this is helpful.
Thanks,
Srikanth
Related Articles:
-> Move to next Tab on Button Click in Flutter https://fluttercentral.com/Articles/Post/1054 ;
-> List of Cards from a JSON source in Flutter 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 https://fluttercentral.com/Articles/Post/44

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.s 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.



© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com