Convert your website into an application in a few minutes (FLUTTER WEBVIEW).

Overview
This how our app will look like.

Enough of the talk let's dive straight into code.

Create a flutter project flutter create flutter webview
We will be making use of flutter_webview_plugin as the dependency insert it inside your pubspec.yaml file.
In our lib folder open main.dart file and delete the auto-generated code inside and paste this

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google', // change this to your company description
theme: ThemeData(
primaryColor: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: WebView(
title: "Google", // change this to your company name
selectedUrl: "https://google.com/", // change the url to your desire url
),
);
}
}
// this is the webview code

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

class WebView extends StatefulWidget {
// so here we're taking the url and title from our main.dart page
// so we can pass it to the webview page
final String title;
final String selectedUrl;
WebView({
Key key,
@required this.title,
@required this.selectedUrl,
}) : super(key: key);

@override
_WebViewState createState() =>
_WebViewState(title: title, selectedUrl: selectedUrl);
}

class _WebViewState extends State<WebView> {
final String title;
final String selectedUrl;
_WebViewState({
@required this.title,
@required this.selectedUrl,
});

@override
Widget build(BuildContext context) {
return SafeArea(
child: WebviewScaffold(
// you can make use of the appbar if you wish to
// appBar: AppBar(
// title: Text('$title'),
// centerTitle: true,
// elevation: 0,
// ),
url: selectedUrl,
withZoom: false,
withLocalStorage: true,
hidden: true,
initialChild: Container(
child: Center(
child: CircularProgressIndicator(),
),
),
),
);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samuel Adekunle (techwithsam)

Samuel Adekunle (techwithsam)

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.