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

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

Today, we’re going to learn the fourth 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 three article 👇

PART THREE ARTICLE

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

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

import 'package:flutter_inappwebview/flutter_inappwebview.dart';class WebExampleFour extends ChromeSafariBrowser {@override
void onOpened() {}
@override
void onCompletedInitialLoad() {}
@override
void onClosed() {}
}

And don’t forget to import the flutter_appwebview library

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

And that’s all for the WebExampleFour 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 WebExampleFour page.

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

final WebExampleFour inAppChrome = WebExampleFour();

Then, on button pressed

MaterialButton(
onPressed: () {
inAppChrome.open(
url: 'https://obounce.net',
options: ChromeSafariBrowserClassOptions(
android: AndroidChromeCustomTabsOptions(),
ios: IOSSafariOptions()));
},
child: Text(
'Example 4',
style: TextStyle(color: Colors.white),
),
color: Colors.pink[900],
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 it 🤭. 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 🥰👨‍💻

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Docker Multi-Architecture Images

SpringVerify| The Seamless, Agile, and Transparent Background Verification Product

WP Cafe — Restaurant Reservation and Food Menu Plugin for WordPress 1.6.1 👑 Nulled-Club Premium

Life is a journey of twists and turns, peaks and valleys, mountains to climb and oceans to explore.

How To Center Any HTML Element in CSS the Right Way — Works Every Time

Automate Jira Tasks with Python

MYSQL MERGE STATEMENT

LeetCode 2. Add Two Numbers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samuel Adekunle (techwithsam)

Samuel Adekunle (techwithsam)

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

More from Medium

Flutter Analog Dial Gauge

How to add Google Maps in a flutter app in one click

What is Flutter?

What makes Flutter different from other languages and frameworks?