DEV Community

loading...
Cover image for FLUTTER WEBVIEW TUTORIAL #2 - Convert a website to an app using flutter.

FLUTTER WEBVIEW TUTORIAL #2 - Convert a website to an app using flutter.

Samuel Adekunle
Hi, I run the YouTube channel called Tech With Sam! I'm passionate about learning and teaching programming majorly Flutter for the moment.
・3 min read

Hi πŸ‘‹, everyone and welcome to part two of the flutter webview tutorial series.

Today, we’re going to learn the second 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. Thanks

Check the video out for more explanation and part one πŸ‘‡

Let get started

We will make use of the flutter_inappwebview package for this example two. To install this package in your app just paste it in your pubspec.yaml file.

4.png

In the webview folder create another dart file for example two, you can name it example2.dart.
In the dart file, import the two necessary package 🎁

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Enter fullscreen mode Exit fullscreen mode

Create a stateful widget and name the class WebExampleTwo or your choice πŸ€·β€β™‚οΈ

class WebExampleTwo extends StatefulWidget {
  WebExampleTwo({Key key}) : super(key: key);

  @override
  _WebExampleTwoState createState() => _WebExampleTwoState();
}

class _WebExampleTwoState extends State<WebExampleTwo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}
Enter fullscreen mode Exit fullscreen mode

We need a controller and double datatype for showing the loading indicator on every page load, so set this under your class State

class _WebExampleTwoState extends State<WebExampleTwo> {
  InAppWebViewController _webViewController;
  double progress = 0;
Enter fullscreen mode Exit fullscreen mode

Body

     body: Container(
        child: Column(
          children: [
            progress < 1.0
                ? LinearProgressIndicator(
                    value: progress,
                    backgroundColor: Colors.white,
                    valueColor:
                        AlwaysStoppedAnimation<Color>(Colors.green[800]),
                  )
                : Center(), // this perform the loading on every page load
            Expanded(
              child: InAppWebView(
                initialUrl: 'https://obounce.net', // your website url
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                    javaScriptEnabled: true,
                    javaScriptCanOpenWindowsAutomatically: true,
                  ),
                ),
                onProgressChanged: (_, load) {
                  setState(() {
                    progress = load / 100;
                  });
                },
                onWebViewCreated: (controller) {
                  _webViewController = controller;
                },
              ),
            )
          ],
        ),
      ),
Enter fullscreen mode Exit fullscreen mode

To create a reload button or icon for a reload action, let's create an icon for that on our appBar

AppBar

      appBar: AppBar(
        title: Text("O'Bounce Technologies"),
        centerTitle: true,
        elevation: 0,
        actions: [
          IconButton(
            onPressed: () {
              if (_webViewController != null) {
                _webViewController.reload();
              }
            },
            icon: Icon(Icons.refresh),
          ),
        ],
      ),
Enter fullscreen mode Exit fullscreen mode

And that's all for the WebExampleTwo 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 WebExampleTwo page.

              MaterialButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (_) => WebExampleTwo()));
                },
                child: Text(
                  'Example 2',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.green,
                padding: EdgeInsets.symmetric(horizontal: 70, vertical: 12),
              ),
Enter fullscreen mode Exit fullscreen mode

And that's all the major stuff you need to know πŸ‘Œ, For more explanation kindly check the video tutorial.

Source Code πŸ‘‡ - Show some ❀️ by starring ⭐ the repo and do follow me πŸ˜„!

GitHub logo techwithsam / flutter_webview

A complete tutorial series on Flutter webview.

full_webview

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference. "# 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 | Twitter | Youtube | WhatsApp | LinkedIn | Patreon | Facebook.

Join the Flutter Dev Community πŸ‘¨β€πŸ’»πŸ‘¨β€πŸ’» ==> Facebook | Telegram | WhatsApp | Signal.

Subscribe to my Telegram channel | Youtube channel. Thanks

Happy Fluttering πŸ₯°πŸ‘¨β€πŸ’»

Discussion (2)

Collapse
songhue profile image
Songhue Try

good

Collapse
techwithsam profile image
Samuel Adekunle Author

Thanks πŸ‘