Flutter webview example

Hi guys,in this tutorial we will discuss about webview implementation in flutter. Webview is a widget used to load webpages inside mobile applications. If you are a native mobile app developer you will be familiar with the concept of webview. You can have a look on android webview example if you are not familiar with the concept.

Steps

  1. Get required packages for implementing webview.
  2. Import required packages.
  3. Implement route for loading webview
  4. Add navigation for loading webview.
  5. Clear webview cache in flutter

Introduce packages for implementing webview

Flutter does not have any default widget for webview. But you can achieve this with the help of library. So you need to import the package for webview for using it in application. For getting package you need to open the pubspec.yaml file and add the following dependency

flutter_webview_plugin:

After adding the following line just click on package get link, android studio will automatically import the packages.

Import required packages

After syncing the webview package we need to import it in your file. You need to open the dart file you are planing to implement the webview and add the following import code.

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Route Implementation

First of all you need to understand what is route. Route is a concept which is used to move from one screen to another in flutter. Here we will use route and navigator to open the webview from our route screen. Following is the route you need to add to your widget.

routes: {
"/webview": (_) => WebviewScaffold(
url: url,
appBar: AppBar(
title: Text("Webview"),
),
withJavascript: true,
withLocalStorage: true,
withZoom: true,
)
},

Navigation for loading webview

Now use the following navigator on your button click or any action to open the webview. Please not that variable url in the following code is a string in which you can assign the url you need to load.

Navigator.of(context).pushNamed("/webview");

Now if you run the application you will get the output displayed below. If you are having any confusion , i am providing the complete code of main.dart at the end of the tutorial. Hope that will help you to understand more clearly.

 

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
String url = 'http:codesfor.in';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Weview',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Webview'),
routes: {
"/webview": (_) => WebviewScaffold(
url: url,
appBar: AppBar(
title: Text("Webview"),
),
withJavascript: true,
withLocalStorage: true,
withZoom: true,
)
},
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
NewWeb createState() => NewWeb();
}

class NewWeb extends State<MyHomePage> {

final webview = FlutterWebviewPlugin();

TextEditingController controller = TextEditingController(text: url);

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Webview"),
),

body: Center(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: TextField(
controller: controller,
),
),
RaisedButton(
child: Text("Open Webview"),
onPressed: () {
Navigator.of(context).pushNamed("/webview");
},
)
],
),
),
);
return null;
}

@override
void initState() {
// TODO: implement initState
super.initState();
webview.close();
controller.addListener(() {
url = controller.text;
});
}

@override
void dispose() {
// TODO: implement dispose
webview.dispose();
controller.dispose();
super.dispose();
}
}

Clear webview cache in flutter

The requirement for clearing a webview will arise in many cases. One example of that is session expired. Suppose if a user is logged out from the application we need to log him out from the webview also .Otherwise there will be a mismatch if the user login with another id. You can use the following code for clearing cache in flutter under any action.

final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.cleanCookies();

 

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *