Flutter WebView: Convert your website into Mobile App

If you are into an online business and you don’t have mobile app for it, then probably you are in huge loss.

And if you want to make one, you will have to pay a huge amount for mobile application. But, No worries! With flutter webview you can easily create one.

You might have heard somewhere that you can easily convert any website into mobile application. This is what this tutorial is about.

In this tutorial, we will be converting our website into a flutter app by using flutter webview package.

With the help of flutter app, we can create mobile apps for both iOS and Android from a single code-base. Yeah! You heard right.

So, Lets dive in!

1. Installation

Before you start writing code, you will have to install the flutter webview package into your project.

For this purpose, create a new flutter project.

Once the project is created, Go to the pubspec.yaml file and add the following dependency:

webview_flutter:

You can refer the following screenshot given below:

flutter webview
pubspec.yaml

After adding the code, just click on get package(in VS Code), now your package will be installed.

2. Usage

After the successful installation of the package, Now the next step is to import the package in our project file.

In order to import the package, we will add the following line of code at the top of our main.dart file.

import 'package:webview_flutter/webview_flutter.dart';

Once the import is successful, Now we will create a stateful widget in main.dart.

Now in the state class we will create a WebViewController as follows:

final Completer<WebViewController> _controller = Completer<WebViewController>();

Once the controller is created, we will use it in our Scaffold widget for loading the website into the body.

WebView(
        initialUrl: "https://codingninja.info",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),

Here, in the above code:

  • initialUrl: This parameter tells the app to load the initial URL when the app launches. Here we are setting our website URL.
  • javascriptMode: This parameter tells the app to enable JavaScript so that our website’s JavaScript can be loaded without any problem.
  • onWebViewCreated: This parameter will load the URL once the WebView is created. Remember, we are using the controller that we created earlier.

Here we will also be adding one floating botton just to enhance its more features. In this flutter webview tutorial, we are just loading an alternative website with it.

floatingActionButton: FutureBuilder<WebViewController>(
        future: _controller.future,
        builder:
            (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
          if (snapshot.hasData) {
            return FloatingActionButton(
              child: Icon(Icons.web),
              onPressed: () {
                snapshot.data.loadUrl("https://youtube.com");
              },
            );
          }
          return Container(
            child: Center(
              child: Text("No Data"),
            ),
          );
        },
      ),

3. Flutter WebView Example Code

Now full working example code for this webview tutorial in the main.dart is given below:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Webview'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: "https://codingninja.info",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
      floatingActionButton: FutureBuilder<WebViewController>(
        future: _controller.future,
        builder:
            (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
          if (snapshot.hasData) {
            return FloatingActionButton(
              child: Icon(Icons.web),
              onPressed: () {
                snapshot.data.loadUrl("https://youtube.com");
              },
            );
          }
          return Container(
            child: Center(
              child: Text("No Data"),
            ),
          );
        },
      ),
    );
  }
}

You can always feel free to explore the official flutter webview package page for more information.

With the above code, we will be achieving like the screenshots given below:

flutter webview
flutter webview

4. Conclusion

In this way, you can easily create an app for your business by using flutter webview package. I hope you liked the tutorial. If you have any queries, please feel free to ask in the comment section.

Happy Coding!