WebView, Flutter’da WebView ve Two-Way-Communication

WebView

WebView, mobil uygulamalar içinde web sayfalarının görüntülenmesini sağlamak için kullanılan bir yapıdır.

Ödeme kısımları birçok mobil uygulamada WebView kullanımının tipik bir örneğidir. Bunun yanı sıra, mobil uygulamalardaki haber, blog, sosyal medya gibi içeriğin görüntülenmesi, online formların doldurulması, online makale okuma gibi aktiviteler de WebView kullanımına örnek olabilecek durumlardır. Ayrıca, birçok mobil uygulama, Google Maps, YouTube gibi harici hizmetlerin kullanımını WebView kullanarak sağlar.

Android’de, Android SDK ile birlikte gelen android.webkit.WebView sınıfını kullanarak WebView’i oluşturabilirsiniz. iOS’da ise, WKWebView sınıfını kullanabilirsiniz.

Flutter tarafında ise, popüler iki farklı WebView eklentisi bulunmaktadır: webview_flutter ve flutter_inappwebview.

Her iki paket de projelerin ihtiyaçlarına göre seçilebilir ve kullanılabilir. Ancak, daha komplike bir uygulama içindeyseniz ve daha fazla özelliğe ihtiyacınız varsa flutter_inappwebview paketini tercih edebilirsiniz. Biz de bu yazımızda flutter_inappwebview paketi üzerinden ilerleyeceğiz.

WebView, web sayfalarının görüntülenmesine odaklı bir yapıdır ve genellikle basit görüntüleme gereksinimlerini karşılar. Ancak, bazı durumlarda, uygulama ile web sayfası arasında veri alışverişi gerekebilir.

Örnek olarak, bir uygulama içinde bir form doldurulur ve form verileri, uygulama tarafından işlenir. Bu verilerin web sayfası tarafından kabul edilmesi ve işlenmesi gerekir. Veya WebView’e uygun bir web sitesi olduğunu hayal edelim. Sizden Authentication & Authorization süreçlerini mobil tarafta handle etmeniz istendi. Bu tarz durumlarda uygulama tarafına web sayfasından veri gönderilmesi gerekir.

İşte tam bu noktada ortaya “Two-Way-Communication” yani İki-Yönlü-Haberleşme karşımıza çıkıyor.

Two-Way Communication

Two-Way Communication, bir mobil uygulamadan web sayfasına ve web sayfasından mobil uygulamaya iki yönlü olarak veri gönderme ve alma işlemidir. Bu işlem, JavaScript ile yapılabilir ve flutter_inappwebview paketi de bu özelliği destekler.

Öncelikle, flutter_inappwebview paketini kullanabilmek için, projenizdeki pubspec.yaml dosyasına aşağıdaki gibi bir bağımlılık eklemelisiniz:

dependencies:
  flutter_inappwebview: <latest_version>

Daha sonra, projenizde InAppWebView widget’ını kullanarak bir web sayfası görüntüleyebilirsiniz:

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My WebView"),
      ),
      body: InAppWebView(
        initialUrl: "https://www.google.com",
        initialHeaders: {},
        initialOptions: InAppWebViewWidgetOptions(
          inAppWebViewOptions: InAppWebViewOptions(
            debuggingEnabled: true,
          ),
        ),
        onWebViewCreated: (InAppWebViewController controller) {
          _webViewController = controller;
        },
        onLoadStart: (InAppWebViewController controller, String url) {
          // Yüklenen web sayfasına veri gönderme işlemi
          _webViewController.evaluateJavascript(
              "document.body.style.backgroundColor = 'red';");
        },
        onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
          // Web sayfasından gelen veri alma işlemi
          if (consoleMessage.message.startsWith("MyApp:")) {
            print(consoleMessage.message);
          }
        },
      ),
    );
  }
}

Web sayfası tarafında ise, JavaScript kodlarıyla veri gönderme işlemi yapılır. Arka taraftan ön tarafa basit bir mesaj gönderilmesi istenir ve bu sayede çift yönlü haberleşme tamamlanır.

console.log("MyApp: Veri gönderildi");

Özetle WebView, mobil uygulamalar içinde web sayfalarını görüntülemek için kullanılan önemli bir araçtır. Flutter tarafında popüler iki farklı paket bulunmaktadır. Bu paketler, projelerin ihtiyaçlarına göre tercih edilebilir ve kullanılabilir, ancak flutter_inappwebview paketi daha gelişmiş özelliklere sahip olduğundan daha çok tercih edilir. Ayrıca, Two-Way-Communication ile web sayfası ve mobil uygulama arasında dinamik veri paylaşımı yapabilmeleri mümkündür. Bu özellik sayesinde web sayfasındaki değişiklikler anında mobil uygulamada yansıtılabilir ve mobil uygulamadan yapılan değişiklikler web sayfasında görülebilir.

Bana LinkedIn üzerinden tek tıkla ulaşabilirsiniz!

Teşekkürler..