Flutter Webview Create Your Website App
The webview_flutter plugin allows us to load web pages on both Android and iOS devices. We will learn how to use this plugin in our Flutter apps. If you are using Flutter, then this blog post will help you to turn your website into an Android App with Flutter. In this tutorial, you will learn how to use the webview_flutter plugin to load webpages from its URL or a local source. We use our own domain orkitt and turned into web app. So let's start by creating a new Flutter project.
Create Flutter Project
To create a new project, open your terminal or command prompt and run the following command:
flutter create webapp
This will create a basic Flutter application named webapp or create with your own and open it on Visual Studio Code or Android Studio.
Add webview_flutter on Dependency
For adding webview_flutter to your project dependency simply run that command or manually add it on pubspec.yaml dependency section..
flutter pub add webview_flutter
Manually paste it on dependency and click pub get button. It will return exit code 0 means successfully added this packge.
dependencies:webview_flutter: ^3.0.4
Now our webview_flutter package added to our project.
Set the minimum SDK version
To run correctly our project needed minimum SDK version 20 for the webview_flutter plugin. Let configure it.
Open android/app/build.gradle in your project and add the below configuration code to the android → defaultConfig section:
android {defaultConfig {minSdkVersion 20}}
FlutterApp Internet Permission
This app need internet permission. It's not hard , it's a simple line of code. Open Android Manifest-
- android/app/src/main/AndroidMenifest.xml
Add the following line in your AndroidManifest.xml file before the <application> section.
<uses-permission android:name="android.permission.INTERNET" />Create Flutter Webview App
Now open main.dart file and replace with this. Replace the the base url and run Or build your app.
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const OrkittBlog());
}
class OrkittBlog extends StatefulWidget {
const OrkittBlog({Key? key}) : super(key: key);
@override
State<OrkittBlog> createState() => _OrkittBlogState();
}
class _OrkittBlogState extends State<OrkittBlog> {
var currentUrl = '';
final Completer<WebViewController> _controller =
Completer<WebViewController>();
late WebViewController controllerGlobal;
//This Is Base URL
var baseUrl = 'https://www.orkitt.com';
bool _isLoading = true;
@override
void initState() {
if (Platform.isAndroid) WebView.platform = AndroidWebView();
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: WillPopScope(
onWillPop: () => _exitApp(context),
child: Stack(
children: [
WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: baseUrl,
userAgent:
'Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E233 Safari/601.1',
gestureNavigationEnabled: true,
onWebViewCreated: (WebViewController webViewController) {
_controller.future
.then((value) => controllerGlobal = value);
_controller.complete(webViewController);
},
onPageStarted: (String url) {
print('Page started loading: $url');
setState(() {
_isLoading = true;
});
},
//
onPageFinished: (String url) {
print('Page finished loading: $url');
setState(() {
_isLoading = false;
});
},
),
_isLoading
? Center(
child: CircularProgressIndicator(),
)
: const SizedBox.shrink(),
],
),
),
),
),
);
}
void showSnackBar(String msg) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(msg),
));
}
Future<bool> _exitApp(BuildContext context) async {
if (await controllerGlobal.canGoBack()) {
controllerGlobal.goBack();
return Future.value(false);
} else {
return Future.value(true);
}
}
}
Turn Your website into App
Turn any website into an Android app using Flutter. The usage is simple and it will take you less than 5 minutes to create a working app. Change the Base url with your own website url and run "flutter build apk". As simple as pie.
Conclusion
We’ve covered some of the basic methods to make an app in Flutter using its Flutter Webview Flutter package. It’s really a simple process to integrate web pages into your Flutter project, and you can use the best of Flutter features to turn your website into android app. Hopefully, you found this tutorial to be helpful. If you did, remember to share it with your fellow developers on social media, and don’t forget to subscribe to get weekly updates on the latest tutorials.