Converting any website into an app: Flutter webview
Tags: flutter, dart, android, webdev
Published: 2022-06-14 15:21:32

<h2><strong> Introduction </strong></h2>

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

<p align = "center">
<img src= "https://raw.githubusercontent.com/Obikwelu/mediafile/main/blog%20media/app.jpg" width="300" height="400"/>

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.

<h2><strong> What is flutter Webview </strong></h2>
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.

<h2><strong> Prerequisite</strong></h2>

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

<p align = "center">
<img src= "https://raw.githubusercontent.com/Obikwelu/mediafile/main/blog%20media/flutter.png" />
</p>

* [Windows](https://www.geeksforgeeks.org/how-to-install-flutter-on-windows/)

* [MacOS](https://www.geeksforgeeks.org/flutter-installation-on-macos/)

* [Linux](https://www.geeksforgeeks.org/how-to-install-flutter-on-linux/)

<h3><strong> Lets start</strong></h2>

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

```cmd
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.

```cmd
C:\app\app3>cd web_to_app

C:\app\app3\web_to_app>code .
```
2. Then we will add the ```webview_flutter``` plugin to our pubspec.yaml file. 

```yaml
webview_flutter: ^3.0.4
```

3. 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.

```gradle
 minSdkVersion 21
```

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

```dart
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'),
      ),
    );
  }
}

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

```dart
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(),
    );
  }
}

```

6. 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.

```dart
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),
      ),
    );
  }
}

```
7. Then you can run your app. 

<img src= "https://raw.githubusercontent.com/Obikwelu/mediafile/main/blog%20media/codenjobs.gif" />
</p>


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

Don't forget to follow me on [codenjobs](https://www.codenjobs.com/user/tripster). 
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](https://www.codenjobs.com/company/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): https://t.me/codenjobs

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

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