Flutter’da WebView Widget Kullanımı 2024 — Adım Adım

Herkese selamlar. Bu yazım da WebView widgetını kullanarak basit bir webview uygulaması yapacak ve widgetın nasıl kullanıldığını öğreneceğiz.

Öncelikle sıfırdan bir proje açıyorum. Ardından pub.dev’de yer alan webview widgetını pubspec.yaml’da yer alan depencies altına ekliyorum ve son olarak da flutter pub get yapıyorum.

Evet webview kütüphanesini projemize başarıyla ekledik. Şimdi kullanımına gelelim. Yeni bir dart dosyası açtım ve içine statefull widget oluşturdum.

Webview kullanabilmem için öncelikle bir controller oluşturmam gerekiyor. Hemen oluşturuyorum.

Şimdi geldik en önemli kısma. Flutter uygulamalarında, uygulama ilk açıldığında ne yapmasını istiyorsak onu initState içerisine yazmamız gerekiyor.

Initstate oluşturdum. Şimdi webview için gerekli işlemleri yapıyorum.

Buradan sonraki adımda Scaffold çağırdım ve bir appBar oluşturdum. Scaffold’umun body kısmına da WebViewWidget çağırdım controller’ı tanımladım.

Şimdi buraya kadar sorunsuz bir şekilde geldik. Son 2 adımımız kaldı. Main dosyasına gidelim önce.

Main.dart’ta body kısmına oluşturduğum webview dosyasımın adını verdim ve son adıma geldik.

WebView işlemimiz artık bitti sayılır. Son olarak AndroidManifest.xml dosyamıza internet izni de verirsek işlemimiz bitiyor.

İşte sonuç;

Kodlar;

import 'package:flutter/material.dart';
import 'package:flutter_webview_example_2024/webview.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: WebViewExample());
  }
}

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

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      //! Uygulamamızda açılacak sayfa
      ..loadRequest(Uri.parse('https://www.google.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //! AppBarda oluşan otomatik geri butonunu kaldırma
        automaticallyImplyLeading: false,
        //! AppBar titleı ortala
        centerTitle: true,
        backgroundColor: Colors.blue,
        title: const Text(
          "WebView AppBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

İnternet izni

<uses-permission android:name=”android.permission.INTERNET” />

Faydalı olması dileğiyle.