Hi Guys Welcome to Proto Coders Point, This project is a Beginner starting point for a Flutter application, Here we will see how can we implement webview in flutter web app development using webview plugin.
Demo on Flutter Webview
Video Tutorial – Convert Website to app
Introduction on Flutter WebView
Presenting a web view is pretty common in mobile apps. In Flutter, this is done by using the webview_flutter package.
Use this package Webview_Flutter as a library
If you want to use flutter webview widget you need to add some dependencies
Add this to your package’s pubspec.yaml file:
dependencies: webview_flutter: ^0.3.15+1
Then make sure with this indentation, sight empty space in pubspec.yaml file might give you error.
Import flutter webview widget package
Now in your Dart code (main.dart), you need to import widget packages, so that you can use flutter webview in you class file.
Let’s start implementing webview in your flutter application.
Create a new Flutter project in android studio.
Give a name to your flutter application. in my case i have name it as flutter_webview. you can name it anything it left to you.
So our flutter project is build and ready to implement our flutter code.
But then are flutter default code added into our flutter dart code. you can delete all the code from main.dart class and copy paste the code i provide you below.
Add below code in your project
Webview widget snippet
key parameter allows the Flutter widget tree to refer to this widget easily using a unique key created via Flutter’s
UniqueKey() method you’ll soon see in the full example below.
initialUrl is the URL we want to display.
The important gotcha here is that we’ll need to use a
StatefulWidget because it appears that if we use a
WebView will not load properly.
We pass in a
url parameter to this widget, which is used in the state of our
Full flutter webview source Code
In the app bar I have used 2 icons that will function as a back and forword button when we navigate to some other url in out webview onWebView controller will take care of this process.
Here there is also a reload button i.e floatingActionButton that will reload the initial url of the application.
Hope this article was useful for you project.
keep visiting proto coders point
check out how to add bottomNavigationbar
Android – How to Convert Website into Android App ?