Exploring WebViews in Flutter
Many Times We are in Need to develop apps where in we can display web pages without needing to open up your device’s Browser , another thing might be that you have Implemented some functionality in your website that do not needs to be developed in your mobile app — WebViews may come in Handy at that place.
How many times have your applications asked you this thing ?
Annoying isn’t it ?
Here’s the solution to this ! Using Flutter you can now incorporate WebViews into your Flutter app to make all of this functionality possible.
WebViews does all the hard lifting for you. Imagine if you were having a secure payment setup already implemented on your website and you want to implement that functionality in your app. Now instead of re implementing the whole setup & logic for mobile application you can give your user an experience of using your website in your application using WebViews. And the best part is, you need not use some browser app to open that webpage. In this way , you can end up saving your time.
Table of Content
Create a new flutter app
:: Open your IDE — Select new flutter project . Enter project name and then click Finish .This will install the sdk (if needed) and will create a new project.
Adding Dependency
To use webview_flutter , include the following dependency in your pubspec.yaml
dependencies:
webview_flutter: ^latest version
Check out the latest version of webview_flutter & additional setup required for iOS over here .
WebView
Instead of having full screen view controller we will use a widget WebViewwhich allow us to create a widget that will let us see the full web view in our app. It is just like any other widget in flutter (we will discuss this briefly further).
WebView(key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url)
- Key: If you have multiple webviews in your app , you might need to use keys which will be illustrated further.
- javasriptMode : Whether Javascript execution is enabled. By default javascriptMode is disabled.
- initialUrl : is the URL we want to display
WebView Controller
Finding out interesting bits and controlling your WebView is all done through webViewController. When WebView is fully built it returns a controller through a callback. The controller allows you to programmatically modify the WebView or access properties like the current URL being displayed
WebViewController _controller;
WebView(
initialUrl: 'https://flutter.io',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
);
We will build a web exploring app for Payment Gateway , News , Wikipedia and Youtube. Each button will be a webview. In this app we would just test it for multiple webviews so that you can better understand the concept of Keys
You can find the complete code for this app at this Github Repository.
Similary , other webviews like Payment Gateway , Youtube & Wikipedia work in the same manner. So let us now dive into the code !!
URL Button Push
Whenever the button for Webview is clicked , it passes the URL to the webViewContainer which contains all the webviews.
void _handleURLButtonPress(BuildContext context, String url) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => WebViewContainer(url)));
}
}
webViewContainer will display your required URL inside our app. Hurray !!
https://gist.github.com/Anirudhk07/163ec51bc45aac01d722a21adcf48f95#file-gistfile1-txt
Are Webviews Widgets ?
Absolutely!
Remember ? I mentioned that webView in our app is just like any other Widget. Let me explain you this with an example.
In Webview you can layer other widgets on the top of them. WebView is just like any other widget in Flutter and can be composed with other widgets layering on top of it. The favorite button is just a regular FloatingActionButton that is hovering on top of the WebView, complete with the shadow effect you would expect with the button. Also, when the drop down menu from the app bar is open, it partially covers the WebView just like with any other widget underneath the menu.
Now let us go through some more interesting features —
Keys
We have multiple webviews in our app —
If you have multiple webviews in your app you might have to use keys. Keys are those optional parameters in just about every widget’s constructor in the flutter code base, if you have multiple stateful widgets of the same type that are added, removed, or reordered you might want to supply that key parameter. So with a collection of web view that you are adding or removing you can add a local key parameter, if you are doing something more complicated that uses the same webviews across two views we should use a global key so that flutter knows that the two webviews are actually same and doesn’t try to render the second.
For more details on how to use Keys go through the code or this video.
That’s all folks! You can now incorporate webviews to your own application.
Conclusion
Webviews provide a much easier way to render your web pages into your app. Using webviews you can ensure secured payment & secured redirecting. Now you don’t have to worry about those annoying pop-ups !
Happy Fluttering !!
Resources :
flutter-devs/Webview-Flutter
A Flutter plugin that provides a WebView widget on Android and iOS. – flutter-devs/Webview-Fluttergithub.com
webview_flutter | Flutter Package
A Flutter plugin that provides a WebView widget. On iOS the WebView widget is backed by a WKWebView; On Android the…pub.dartlang.org
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
