In this tutorial we will learn how to create WebView in Flutter. Loading the web page in flutter is so easy task using the WebView plugin in flutter. We will use the URL of any web page to load it in WebView.
Generally WebView in flutter loads the webpage in the application. It took the URL of the webpage and return the entire page from the server.
WebView Plugin For Flutter
Add the following dependency in your pubspec.yml file and click on pub get.
flutter_webview_plugin: ^0.4.0The pubspec.yml will look like this.
name: ecommerce_app
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
intl: ^0.15.7
http: ^0.12.0+2
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
carousel_slider: ^4.0.0
image_picker: ^0.6.7+9
image_cropper: 1.2.1
local_auth: ^0.5.2+3
flutter_webview_plugin: ^0.4.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
Installing Using Command Line
You can run the following command in the terminal to add this WebView dependency.
flutter pub add flutter_webview_pluginHow To Solve Error Of flutter_webview_plugin Dependency
If you get any error during installing the above dependency you can downgrade the version of this plugin from here.
Implementing the WebView Plugin in Flutter
To use the WebView use the WebViewScaffold() and use the required parameters like url and other properties which are below. Put he URL of webpage that you want to load in the url property.
new WebviewScaffold(
url: "https://www.fluttertpoint.com/",
withZoom: false,
hidden: false,
// initialChild: new CircularProgressIndicator(color: Colors.red,),
appBar: new AppBar(
title: new Text("Flutter WebView"),
),
),Properties of WebView
There are many properties of this WebView plugin that are useful to smoothly load the WebView. Some of them are below. You can add the following properties.
url: "https://www.fluttertpoint.com/",
withZoom: false,
hidden: false,
initialChild : here
appBar: new AppBar(
title: new Text("Flutter WebView"),
),- Zoom controll
- Cache
- Reload
- Scrollbar controll
- Local storage
- WithJavaScript
- Hidden
- Clear cache
- WithOverViewMode
- WithLocalURL
- SupportMultipleWindows
- IgnoreSSLErrors
You can see all the properties and other content from the WebView plugin. You can use according to your requirement in your project to load the WebView.
Complete Class of WebView in Flutter
You can use the following code in your project to load the WebView. Modify according to your requirement and put your URL.
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: new WebviewScaffold(
url: "https://www.fluttertpoint.com/",
withZoom: false,
hidden: false,
// initialChild: new CircularProgressIndicator(color: Colors.red,),
appBar: new AppBar(
title: new Text("Flutter WebView"),
),
),
);
}
}
Result
Result of the above code is below.
Thank You for visiting this tutorial. Hope this helped you. For any issue and doubt you can comment in the comment section below. You can learn more Flutter Tutorials to improve your development skills for better performance.
