Google Flutter Logo

Flutter’da HTML dosyası WebView olarak nasıl açılır?

Yazarı:

Flutter uygulamalarında HTML dosyaların veya HTML response’ların nasıl uygulama içerisinde WebView olarak açıldığını ele alacağım bu yazıya hoşgeldiniz. Bu yazıda anlatacağım yöntemle beraber asset olarak eklediğiniz HTML dosyayı WebView’da gösterebilir ayrıca bir HTTP isteği sonucunda dönen response’un HTML dosya olması neticesinde nasıl bir aksiyon alınır anlatacağım.

Flutter’da HTML dosyaları ve HTML veri içeren değişkenleri WebView olarak kullanıcıya göstermek için öncelikle WebView paketini uygulamamıza ekleyelim.Daha sonra asset olarak bir HTML dosyası açacaksanız, bunu uygulamanın içine ekleyin.

WebView yardımıyla bir StatefulWidget oluşturalım. Bu StatefulWidget içerisinde HTML içeriğimizi kullanıcıya göstereceğiz.

 WebViewController controller;
 
 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ödeme'),
      ),
      body: WebView(
        initialUrl: '',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (val) async {
          controller = val;
          await _loadHtmlFromAssets(widget.content);
        },
      ),
    );
  }

initialUrl kısmı boş olacak çünkü yükleyeceğimiz HTML dosyasının görünümünü alacak. WebView oluşturulduğunda loadHtmlFromAssets’e gönderdiğimiz bir String HTML sayfa üzerinde render edilecek. Bu durumda widget.content isimli değişken, bir HTML String tutuyor olacak.

  _loadHtmlFromAssets(String content) async {
    controller.loadUrl(Uri.dataFromString(content,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());

WebView controller nesnemiz aracılığıyla String olarak gönderilen HTML dosyamızı bu şekilde WebView içerisinde gösterebiliriz. Bu yöntem, Flutter uygulamaları üzerinde 3D Secure, ödeme kapısı vb. sayfaları yani önemli dataların sayfalarını göstermekte kullanılabilir. Peki ya assets klasörüne eklediğimiz .html uzantılı dosyamızı açmak istiyorsak?

  _loadHtmlFromAssets() async {
    String fileText = await rootBundle.loadString('assets/dosya.html');
    controller.loadUrl( Uri.dataFromString(
        fileText,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }

rootBundle aracılığıyla help.html içerisindeki HTML sayfasını String olarak bir değişkene atıp bu şekilde controller aracılığıyla istediğimiz HTML içeriğini WebView üzerinde gösterebilir ve bununla etkileşime geçebiliriz.

Eğer belirli HTML dosyalarını gösterip bu dosyalar üzerinde aksiyon almayacaksanız flutter_html kütüphanesi sizin aradığınız kütüphane olabilir. Göz atmakta fayda var. 🙂

Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!