New post Need visibility? Apply for a FREE post for your Startup.Β  Apply Here

Mobile

Convert a website into an application in just a few minutes – FLUTTER WEBVIEW TUTORIAL (Part 1).

2 Mins read

Hi πŸ‘‹, everyone and welcome to a brand new tutorial series on Flutter.

Today I wanted to write about one of those features in a mobile application, which as you may have guessed from the title, is a webview app in Flutter! If you want to know more about some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, consider subscribing to my newsletter so you don’t miss anything!

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 ✌

Flutter Webview Tutorial (PART 2). – YouTube

I have already written two articles on this same topics before but there are fresh features on the package used

  1. Convert your website into a mobile application in just a few minutes using flutter.
  2. Flutter Advanced Webview Tutorial #1 β€” InAppWebview(Android & iOS).

Let’s get started

Firstly, we’re going to use the 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

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

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

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.

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

Flutter Webview – Github

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 to Techpadi newsletter in the input box above πŸ‘†πŸ‘† or below πŸ€·β€β™€οΈ. Thanks

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

Don’t miss any tech news ever!

We don’t spam! Read our privacy policy for more info.

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Articles
Related posts
ArticleMobileNow you knowRandom

All You Need To Know About Your iPhone Battery Health

2 Mins read
The iPhone is renowned for its sleek design, user-friendly interface, and advanced features. However, like all smartphones, it relies on a battery…
ArticleMobileRandom

Motorola Unveils Under $100 Android 14 Smartphone Better Than The iPhone 15 Specs

2 Mins read
I remember growing up, one of the phones you can easily find in the Palms on many is a Motorola blue light…
Mobile

Google Introduces Safe Browsing Feature for Smartphone Users: How it Works

2 Mins read
Google is introducing a groundbreaking security feature, dubbed “Android Safe Browsing,” aimed at safeguarding users against malicious links and websites while utilizing…
Newsletter Subscription

🀞 Don’t miss any update!

We don’t spam! Read more in our privacy policy

Join our Telegram channel here - t.me/TechpadiAfrica

Leave a Reply