FLUTTER WEBVIEW TUTORIAL #3 — Convert a website to an app using flutter.

Samuel Adekunle (techwithsam)
3 min readFeb 12, 2021


Hi 👋, everyone and welcome to part three of the flutter webview tutorial series.

Today, we’re going to learn the second example on how to convert a website into an app in a few minutes using Flutter. If you want to know more about some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, consider following me so you don’t miss any updates and subscribing to my YouTube Channel. Thanks

Check the video out for more explanation and part two 👇


We’re still using the flutter_inappwebview package, so just create another dart file for example 3, you can name it WebExampleThree.

The example is pretty straightforward, we just need some methods and parameters like the code below

import 'package:flutter_inappwebview/flutter_inappwebview.dart';class WebExampleThree extends InAppBrowser {
Future onBrowserCreated() async {}
Future onLoadStart(url) async {}
Future onLoadStop(url) async {}
void onLoadError(url, code, msg) {}
void onProgressChanged(progress) {}
void onExit() {}
Future<ShouldOverrideUrlLoadingAction> shouldOverrideUrlLoading(
ShouldOverrideUrlLoadingRequest shouldOverrideUrlLoadingRequest) async {
return ShouldOverrideUrlLoadingAction.ALLOW;
void onLoadResource(response) {}
void onConsoleMessage(msg) {}

And don’t forget to import the flutter_appwebview library

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

For more explanation kindly check the video tutorial

And that’s all for the WebExampleThree page you can now move to the homepage.dart file or any page you want your user to click the button to navigate to the WebExampleThree page.

So on the homepage, we just have to declare a final variable for WebExampleThree and that’s all

class _HomePageState extends State<HomePage> {
final WebExampleThree inAppBrowser = WebExampleThree();

Then, on button pressed

onPressed: () {
inAppBrowser.openUrl(url: 'https://obounce.net');
child: Text(
'Example 3',
style: TextStyle(color: Colors.white),
color: Colors.purple[700],
padding: EdgeInsets.symmetric(horizontal: 70, vertical: 12),

And that’s all the major stuff you need to know 👌, For more explanation kindly check the video tutorial.

Source Code 👇 — Show some ❤️ by starring ⭐ the repo and do follow me 😄!

I hope you have learned one thing or the other, kindly give this article much appreciation you want if you enjoy it, feel free to ask a question and leave a comment if you feel like 🤭. Thanks for reading and see you in the next series.

🔗 Social Media / Let’s Connect 🔗 ==> Github | Twitter | Youtube | WhatsApp | LinkedIn | Patreon | Facebook.

Join the Flutter Dev Community 👨‍💻👨‍💻 ==> Facebook | Telegram | WhatsApp | Signal.

Subscribe to my Telegram channel | Youtube channel | and also to hashnode newsletter in the input box above 👆👆. Thanks

Happy Fluttering 🥰👨‍💻



Samuel Adekunle (techwithsam)

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.