FLUTTER WEBVIEW TUTORIAL #3 - Convert a website to an app using flutter.
Tags: flutter, android, techwithsam, tutorial
Published: 2021-03-05 08:23:29

### 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](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

**Check the video out for more explanation and part two article** 👇

{% youtube ecU6E5dQswI %}

### PART TWO ARTICLE
{% link https://dev.to/techwithsam/flutter-webview-tutorial-2-convert-a-website-to-an-app-using-flutter-1g73 %}

# Let get started

We're still using the [flutter_inappwebview](https://pub.dev/packages/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 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
```
              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.

{% youtube ecU6E5dQswI %}

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

{% github techwithsam/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 it 🤭. Thanks for reading and see you in the next series.

🔗 Let's Connect 🔗 --> [Github](https://github.com/techwithsam) | [Twitter](https://twitter.com/techwithsam_) | [Youtube](https://www.youtube.com/c/TechWithSam?sub_confirmation=1) | [WhatsApp](https://wa.me/message/JLGQNNTPG64IH1) | [LinkedIn](https://linkedin.com/in/techwithsam) | [Patreon](https://www.patreon.com/acctgen1) | [Facebook](https://facebook.com/techwithsam).

Join the Flutter Dev Community 👨‍💻👨‍💻 ==> [Facebook](https://www.facebook.com/groups/flutterdevsgroup/) | [Telegram](https://t.me/flutterdevsgroup) | [WhatsApp](https://chat.whatsapp.com/Cns1jo7dc5dCNrg6aG44My) | [Signal](https://signal.group/#CjQKILccbSu9GnMF_qVrkdCFVQ_i2gmnigPDvweCy86JGpL3EhBg39kp1rftGQgZDYXLty7t).

Subscribe to my [Telegram channel](https://t.me/acctgen) | [Youtube channel](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

**Happy Fluttering** 🥰👨‍💻