Convert your website into an application in a few minutes (FLUTTER WEBVIEW).

Hello everyone and welcome to a brand new tutorial series on Flutter. Today we’re going to learn how to convert a website into an app in a few minutes using Flutter.

Overview

Before we get started kindly check the updated article on this topic here on medium link below 👇 and on my Youtube channel as well.

Updated Article: FLUTTER WEBVIEW TUTORIAL #1 — Convert a website into a mobile app.

Converting your website into an application only takes a few codes.
You might be wondering why would you want to convert your website into an application.

First, According to statistics users spend more time on their phones so building a webview app solves the problem of your customer having to start entering the URL of your website on their browser every time they want to patronize you which 50% of the customer would have forgotten the correct URL.

It curves fraudulent activities: You might be thinking how but in one way or the other it saves you from fraud, imagine your website is a payment platform where customers can enter their card details, okay and the URL of your website is https://google.com is has been a custom act for hackers to make a close/same like URL to a payment platform so has to collect information they would need so your user now enter https://googie.com if you look close you will see it’s a wrong URL but the most customer won’t know that, So a webview app doesn’t need a user to enter any URL just open the and use.

Third, you can’t actually rely on a webview app for a long time if your business is going far, So you can contact me if you need a real application.
But before building a real application for your business you can build a webview application first just to let the users know that you’re working on something really big.

Enough of the talk let's dive straight into code.

Create a flutter project flutter create flutter webview
We will be making use of flutter_webview_plugin as the dependency insert it inside your pubspec.yaml file.
In our lib folder open main.dart file and delete the auto-generated code inside and paste this

import 'package:flutter/material.dart';
import 'web.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google', // change this to your company description
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: WebView(
        title: "Google", // change this to your company name
        selectedUrl: "https://google.com/", // change the url to your desire url
      ),
    );
  }
}

You will notice I import another file called web.dart just create another file inside the lib folder and call it web.dart inside the file just paste this

// this is the webview code

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebView extends StatefulWidget {
  // so here we're taking the url and title from our main.dart page
  // so we can pass it to the webview page
  final String title;
  final String selectedUrl;
  WebView({
    Key key,
    @required this.title,
    @required this.selectedUrl,
  }) : super(key: key);

  @override
  _WebViewState createState() =>
      _WebViewState(title: title, selectedUrl: selectedUrl);
}

class _WebViewState extends State<WebView> {
  final String title;
  final String selectedUrl;
  _WebViewState({
    @required this.title,
    @required this.selectedUrl,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: WebviewScaffold(
        // you can make use of the appbar if you wish to
        // appBar: AppBar(
        //   title: Text('$title'),
        //   centerTitle: true,
        //   elevation: 0,
        // ),
        url: selectedUrl,
        withZoom: false,
        withLocalStorage: true,
        hidden: true,
        initialChild: Container(
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ),
    );
  }
}

That’s all and we’re done, so let me explain how the code works, if you’re familiar with flutter you would have to understand some but…

Inside the main.dart file we create the normal route to open a flutter application which is void main()=> runApp(MyApp()); then we move the MyApp class and open the web.dart file we created so I actually pass the URL and title from the start so you will just call the URL in the web.dart file.

So inside the web.dart file, we import the necessary package and create a stateful widget and we ask for the URL and title from the page that is asking for it, after that in the build widget we return a SafeArea so that the webview won’t scatter but maintain its position then inside the safearea we call theWebviewScaffold Widget and pass the necessary thing we need url: selectedUrl the URL we sent then we call and there are many other properties that come with the widget which you can make use of.

Source code 👇

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 🤭. Thanks for reading and see you in the next series.

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

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

Subscribe to my Telegram channel | Youtube channel | and also consider following me so you won’t miss any updates. Thanks

Happy Fluttering 🥰👨‍💻

Read also: FLUTTER WEBVIEW TUTORIAL #1 — Convert a website into a mobile app.