FLUTTER WEBVIEW TUTORIAL #1 - Convert a website to an app using flutter.
Tags: flutter, android, techwithsam, tutorial
Published: 2021-03-04 09:17:03

## Hi 👋, 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, which as you may have guessed already from the title! 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

In this tutorial, we will create the first example of our webview application using flutter, and this is the simplest way to showcase a webpage in our app.

This series will be split into four because we're going to unveil four examples of a webview app we can use in a flutter application.

Kindly check out the **PART ONE** video on my Youtube channel. Kindly subscribe ✌

{% youtube nFLTjv_2IwQ %}


# **Let's get started**

Firstly, we're going to use the  [flutter_webview_plugin](https://pub.dev/packages/flutter_webview_plugin)  package for **PART ONE**. Son install this package in your app by pasting it in your **pubspec.yaml** file.


![photo_2021-02-03_21-53-03.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612385686703/ChjP2dcxl.jpeg)

Create a new dart file for the webview page and name it **webApp1.dart** or so 🤷‍♂️, after creating the dart file, then inside the file **{webApp1.dart}** create a **StatefulWidget**  and name the class as you wish, I will name mine ## **WebExampleOne** 😎.

In the build widget, we're going to return the webview widget called ==> **WebviewScaffold** instead of returning a normal Scaffold widget 🤢. 


![photo_2021-02-03_22-09-11.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1612386571313/YOBtCJ8yS.jpeg)

But before that, you need to import our material widget and the flutter_webview_plugin widget as well

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

And that's all, we can now work on our **WebviewScaffold,** if you press CTRL + SPACE --> (Both Windows and Mac) inside the bracket of the **WebviewScaffold( )** you will see a list of resources you can make use of while the **URL** is required,

```
url: 'https://obounce.net'
```

![Screenshot 2021-02-03 222221.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612387361984/JzdL-_9F_.png)

Then, after that you can just explore other useful methods you might need
```
appBar: AppBar(
        title: Text("O'Bounce Technologies"),
        centerTitle: true,
        elevation: 0,
      ),
      withZoom: true,
      withLocalStorage: true,
      scrollBar: true,
      withJavascript: true,
      initialChild: Center(child: Text('Loading...')),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(12),
        child: Text('This is the bottomNavigationBar on a webview page.'),
      ),
      persistentFooterButtons: [
        CircleAvatar(
          backgroundColor: Colors.purple,
          child: Text('btn1'),
        ),
        CircleAvatar(
          backgroundColor: Colors.orange,
          child: Text('btn2'),
        ),
        CircleAvatar(
          backgroundColor: Colors.red,
          child: Text('btn3'),
        ),
        CircleAvatar(
          backgroundColor: Colors.grey[700],
          child: Text('btn4'),
        ),
      ],
```

And that's all the major stuff we need 👌, You should check out the video for more explanation.

{% youtube nFLTjv_2IwQ %}

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.

🔗 Social Media / 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** 🥰👨‍💻