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

Mobile

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

2 Mins read

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 FOUR YouTube Tutorial

PART THREE ARTICLE

Let get started

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 πŸ˜„!

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 πŸ₯°πŸ‘¨β€πŸ’»

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
MobileNewsNow you knowRandom

Photography Just Got Better With The New GCAM 8.7 For Android Smartphones

2 Mins read
Now in 2023, about 86.41% of the world’s population own a smartphone, which translates to 6.92 Billion people. This is to state…
Big StoryMobileNews

Samsung to Offer Higher Quality Photo Uploads on Instagram, Snapchat, TikTok

1 Mins read
Samsung has reportedly partnered with popular social media platforms Instagram, Snapchat, and TikTok in order to improve the quality of pictures taken…
MobileNews

Samsung Galaxy S23, Galaxy S23+ New Colour Options Tipped

1 Mins read
Samsung Galaxy S23 series, which may include the vanilla Samsung Galaxy S23, Galaxy S23+, and Galaxy S23 Ultra, has been the subject…
Get powered up with Techpadi Newsletter

Be the first to know what's happening in the African tech space

Leave a Reply