Enhancing Your Flutter App with flutter_inappwebview

If you’re looking to embed web content into your Flutter app, you’re in the right place. The flutter_inappwebview package is a fantastic tool that allows you to do just that, seamlessly and effectively. In this post, we’ll walk you through setting up flutter_inappwebview. Let’s get started!

Step 1: Set Up Your Dependencies

First things first, let’s get our dependencies in order. Open your pubspec.yaml file and add the following lines:

dependencies:
 flutter:
 sdk: flutter
 flutter_inappwebview: ^6.0.0
 permission_handler: ^11.3.1

Run flutter pub get to fetch the packages.

Step 2: Set Up Your Main Application

Next, we’ll set up our main Flutter application.

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: const Home(),
    );
  }
}

Step 3: Create the Home Page

Our Home widget will include the InAppWebView and handle various web view events. This is where the magic happens.

class Home extends GetView<HomeController> {
  const Home({super.key});
  
  @override
  Widget build(BuildContext context) {
    Get.put<HomeController>(HomeController());

    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            InAppWebView(
              onProgressChanged: (InAppWebViewController inAppWebViewController,
                  int progress) {
                controller.setProgress(progress);                
              },
              onWebViewCreated:
                  (InAppWebViewController inAppWebViewController) {
                controller.setWebViewController(inAppWebViewController);
              },
              onPermissionRequest: (InAppWebViewController controller,
                  PermissionRequest permissionRequest) {
                 // handle permissions
              },
              initialUrlRequest: URLRequest(
                  url: WebUri.uri(Uri.parse("https://flutter.dev/"))),
            ),
            Obx(() {
              final double progress = controller.progress.value;
              if (progress < 1) {
                return LinearProgressIndicator(value: progress);
              }
              return const SizedBox.shrink();
            })
          ],
        ),
      ),
    );
 }
}

class HomeController extends GetxController {
  RxDouble progress = 0.0.obs;
  setProgress(int newProgress) {
    progress.value = newProgress / 100;
  }

  InAppWebViewController? _inAppWebViewController;

  setWebViewController(InAppWebViewController controller) {
    _inAppWebViewController = controller;
  }

  @override
  void dispose() {
    super.dispose();
    _inAppWebViewController?.dispose();
  }
}

Step 4: Handle Permissions

Permissions are super important, especially when your web content needs access to device features like, for example, the microphone. We handle permissions directly within the onPermissionRequest callback.

Here’s how it looks:

onPermissionRequest: (InAppWebViewController controller,
                  PermissionRequest permissionRequest) async {
        if (permissionRequest.resources
            .contains(PermissionResourceType.MICROPHONE)) {
                 final PermissionStatus permissionStatus =
                    await Permission.microphone.request();
                if (permissionStatus.isGranted) {
                     return PermissionResponse(
                      resources: permissionRequest.resources,
                      action: PermissionResponseAction.GRANT,
                    );
                } else if (permissionStatus.isDenied) {
                    return PermissionResponse(
                      resources: permissionRequest.resources,
                      action: PermissionResponseAction.DENY,
                    );
                  }
                }
             return null;
        },

Step 5: Understanding the Code

Let’s break it down a bit:

- InAppWebView: This widget from flutter_inappwebview is the core component for embedding web content.
— onProgressChanged: Updates the loading progress, which we display using a LinearProgressIndicator.async
— onWebViewCreated: Provides the InAppWebViewController when the web view is created, which provides methods like reload(), zoomIn() and zoomOut() etc.. You can find more on here.
— onPermissionRequest: Handles permission requests. In this case, we handle microphone permissions by using the permission_handler package.
— initialUrlRequest: Sets the initial URL to be loaded in the web view.

Wrapping Up

Integrating flutter_inappwebview into your Flutter app is a fantastic way to seamlessly embed web content. By handling permissions effectively, you ensure a smooth user experience.

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Until then Bye-Bye.