Converting any website into an app: Flutter webview

Introduction

Mobile apps are really essential for online businesses. Most times businesses even though own websites still create apps that meet their customers need so as to stay relevant. Most of these apps are quite easy to access for the customers and if the onboarding process is well structured, conversion can be massive for these companies. Another reason why websites tend to make mobile app versions of their website is to increase ad revenues. The most pouplar app advertising service is Google Admob and with proper structuring, returns from ads can be masive

Let's say you have a website and you want to create an app version, the best way to do this as a developer would be to create an API (which we discussed about in our previous article) through which data can be exchanged between your mobile app and database(backend). Using this route makes your app more customizable but it requires you doing greater work. If on the other hand you're eager to create something and push it out to your users another way is to use webview to do this.

What is flutter Webview

Flutter webview allows us to display web pages in our apps. Also note that it does not act as a web browser. To learn more you can google search.

Prerequisite

In order to follow along with this tutorial you must have installed Flutter version 2.10 or higher, android studio and setup up the necessary environment to run your flutter app. You can use any IDE of your choice from Vscode, IntelliJ or android studio

• Windows

• MacOS

• Linux

Lets start

1. I will name the app web_to_app . Run the code in your terminal

flutter create web_to_app

If you are using Vscode as your IDE you can do the following to open up your folder quickly in visual studio code.

C:\app\app3>cd web_to_app

C:\app\app3\web_to_app>code .

1. Then we will add the webview_flutter plugin to our pubspec.yaml file.

webview_flutter: ^3.0.4

1. Then in the app folder in the build.gradle change the minimum sdk to 21. I ran into some issues with 19 and it took me awhile to resolve. So 21 is better, but you can try other SDK version but the minimum from documentation is 19.

 minSdkVersion 21

1. Then we create a home.dart file in our lib folder. Then create the homescreen this will be a stateful widget.

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
    );
  }
}

1. Then we import the home screen in our main.dart file.

import 'package:flutter/material.dart';
import 'package:web_to_app/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview app',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

1. In the homescreen, we add our webview as our scaffold body. we also pass in the controllers. we use late for our webviewcontroller because it wil be initialise later on in our app. Then we also create a floating action button. This wil be used to refresh our app.

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late WebViewController controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://www.codenjobs.com',
        onWebViewCreated: (controller) {
          this.controller = controller;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          controller.reload();
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

1. Then you can run your app.

Get the source code at https://github.com/Obikwelu/web_to_app

Don't forget to follow me on codenjobs.
Codenjobs is a building an ecosystem in the blockchain and cryptocurrency space to allow developers secure more jobs. You can learn more about code&jobs here about page. If you're crypto savvy, you can read the whitepaper to know more and follow the project. To get latest update about code & jobs join their social media handle by clicking the links below.

[x] Telegram: https://t.me/codenjobs

[x] Twitter: https://twitter.com/codenjobs

[x] Discord: https://discord.gg/eWTXzPrsJ3