New post Need visibility? Apply for a FREE post for your Startup.ย  Apply Here

MobileRandom

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

2 Mins read

Hi ๐Ÿ‘‹, everyone and welcome to part three of the flutter webview tutorial series.

Today, weโ€™re going to learn the third 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 on part three and part twoย ๐Ÿ‘‡

Part 3 video tutorial

PART TWO ARTICLE

Let get started

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 {
  @override
  Future onBrowserCreated() async {}

  @override
  Future onLoadStart(url) async {}

  @override
  Future onLoadStop(url) async {}

  @override
  void onLoadError(url, code, msg) {}

  @override
  void onProgressChanged(progress) {}

  @override
  void onExit() {}

  @override
  Future<ShouldOverrideUrlLoadingAction> shouldOverrideUrlLoading(
      ShouldOverrideUrlLoadingRequest shouldOverrideUrlLoadingRequest) async {
    return ShouldOverrideUrlLoadingAction.ALLOW;
  }

  @override 
  void onLoadResource(response) {}

  @override 
  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 in 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

              MaterialButton(
                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 ๐Ÿ˜„!

GitHub โ€“ Flutter Webview

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 ๐Ÿฅฐ๐Ÿ‘จโ€๐Ÿ’ป

Donโ€™t miss any tech news ever!

We donโ€™t spam! Read our privacy policy for more info.

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Articles
Related posts
ArticleForeign startupsRandom

Grayce Raises $10.4M In Series A Funding

1 Mins read
Grayce, a social care platform based in San Francisco, CA, has successfully raised $10.4 million in Series A funding. The funding round…
ArticleMobileNewsRandom

OPPO Unveils The F27 Pro+ 5G, India's First Damage-proof Smartphone With An IP69 Rating

2 Mins read
We are in the age of digitization, hence the use of smart devices are seen as the new normal. Virtually everyone you…
ArticleMobileNewsRandom

What You Should Expect From WhatsApp beta 24.12.10.74 For iOS

1 Mins read
One of the most common social applications we use on a daily is WhatsApp. With its over 3B active users, the quest…
Newsletter Subscription

๐Ÿคž Donโ€™t miss any update!

We donโ€™t spam! Read more in our privacy policy

Join our Telegram channel here - t.me/TechpadiAfrica

Leave a Reply