[Flutter] WebView

2022-04-14 hit count image

Let's see how to use webview_flutter to show the web page in the app on Flutter.

Outline

In this blog post, I will introduce how to use the webview_flutter package to show the web page in the Flutter app.

You can see the full source code of this blog post on the following link.

Cretae Flutter project

To check how to use webview_flutter in Flutter, execute the following command to create a new Flutter project.

flutter create webview_flutter_example

Install webview_flutter

To use webview_flutter, Execute the following command to install the webview_flutter package.

flutter pub add webview_flutter

Next, let’s see how to use webview_flutter.

Configure Android

To use webview_flutter on Android, you need to configure 19 to minSdkVersion. Open the ./android/app/build.gradle file and modify it like the below.

android {
    defaultConfig {
        minSdkVersion 19
    }
}

How to use

To see how to use webview_flutter, Open the ./lib/main.dart file and modify it like the below.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const WebView(
      initialUrl: 'https://dev-yakuza.posstree.com/en/',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

When you execute the code, you can see the following screen.

Flutter - webview_flutter example

SafeArea

As you see the example code, the web page is shown under the status bar on top of the screen and the home bar on the bottom of the screen. When you use the SafeArea widget, you can show the web page up status bar and the home bar. Open the ./lib/main.dart file again and modify it like the below.

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://dev-yakuza.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

When you execute the code, you can see the web page shown well like the below.

Flutter - webview_flutter SafeArea

gestureNavigationEnabled

When the user goes back to the previous page on the app or the web, normally the user swipes the screen. To active this feature, you need to use the gestureNavigationEnabled option. Open the ./lib/main.dart file again and modify it like the below.

...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://dev-yakuza.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
        ),
      ),
    );
  }
}

Execute the app again, and go to the another page, and then when you swipe the sreen, now you can go back to the previous page.

Flutter - webview_flutter swipe back

userAgent

If you have the Google login in the web page, you acn see the 403: disallowed_useragent error like the below.

Flutter - webview_flutter disallowed_useragent

To solve this issue, you need to configure the userAgent option to WebView. Open the ./lib/main.dart file and modify it like the below.

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: 'https://dev-yakuza.posstree.com/en/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
          userAgent: "random",
        ),
      ),
    );
  }
}

When you execute the app and try Google login, you can see the Google login shown well like the below.

Flutter - webview_flutter Google Login

Completed

Done! we’ve seen how to use webview_flutter to show the web page in the Flutter app. Also, we’ve seen solutions to the issues when you use webview_flutter.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku. 지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts