Flutter’da WebView Örneği

FLUTTER 0 Yorum

Flutter, Google tarafından yayına sürülen açık kaynaklı bir UI yazılım geliştirme aracıdır. Şimdi Flutter uygulamanıza nasıl WebView ekleneceğini öğreneceğiz

WebView nedir?

WebView, mobil uygulamanızın web içeriğini görüntülemesine izin veren bir Flutter Widget’tır.

WebView Flutter Eklentisi Ekleme

Flutter uygulamanızda WebView widget’ını kullanmaya başlamadan önce , pubspec.yaml dosyasında dependencies: alanına aşağıdaki kodu eklemeniz gerekmektedir.

webview_flutter: ^1.0.7

Kodu eklediğinize göre bir sonraki adıma geçeceğiz.

Web Görünümü Oluşturma

Aşağıda, bir WebView nesnesi oluşturmanız için gereken temel bir kod bulunmaktadır .

WebView(
        initialUrl: 'https://onursahin.net/',
        javascriptMode: JavascriptMode.unrestricted,
      )

WebView widgetı yukarıda göründüğü gibi 2 tane parametre alır, bunlar;

  • initialUrl – görüntülemek istediğiniz web sayfasının linki
  • javascriptMode – WebView’in JavaScript çalıştırmasını  sağlar . Varsayılan olarak, JavaScript desteği devre dışı bırakılır

Not : WebView widgetının responsive olmasını ve tüm ekranı kaplamasını istiyorsanız, üst öğeye bir Expanded widgetı eklemelisiniz.

Tam Kod Örneği

Aşağıda, Flutter mobil uygulamanıza bir WebView widget’ının nasıl ekleneceğine dair eksiksiz bir kod örneği verilmiştir.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Body(),
    );
  }
}
class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
      ),
      body: Expanded(
        child: WebView(
          initialUrl: 'https://onursahin.net/',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

Umarım bu eğitim size yardımcı olmuştur.

Aşağıdaki örnek webview uygulamasını görmek için gİthub profilim

Flutter webview
Flutter webview

Yorum Yap