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

Hi 👋, everyone and welcome to part two of the flutter webview tutorial series.

Article banner
Video Tutorial
import 'package:flutter/material.dart'; 
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
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();
}
}
class _WebExampleTwoState extends State<WebExampleTwo> {
InAppWebViewController _webViewController;
double progress = 0;

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

AppBar

appBar: AppBar(
title: Text("O'Bounce Technologies"),
centerTitle: true,
elevation: 0,
actions: [
IconButton(
onPressed: () {
if (_webViewController != null) {
_webViewController.reload();
}
},
icon: Icon(Icons.refresh),
),
],
),
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),
),

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