• Genel
  • Flutter ile WebView kullanımı

AlperDuzgun import ‘dart:async’;


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

const kAndroidUserAgent =
    'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36';

String selectedUrl = '';

// ignore: prefer_collection_literals

void main() => runApp(VideoWebview());

class VideoWebview extends StatefulWidget {
  
  String adres;
  VideoWebview({this.adres});
  @override
  State<StatefulWidget> createState() => MyAppState(adres: adres);
}

int _bottomNavIndex = 0;

class MyAppState extends State {
String adres;
MyAppState({
  this.adres
});
  @override
  void initState() {
    
    selectedUrl=adres;
    super.initState();
  }
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: WebviewScaffold(
            appBar: AppBar(
              backgroundColor: Colors.blueAccent,
              actions: <Widget>[
                BottomAppBar(
                  color: Colors.blueAccent,
                  child: Row(
                    children: <Widget>[
                     
                      IconButton(
                        icon: const Icon(Icons.autorenew),
                        onPressed: () {
                          flutterWebViewPlugin.reload();
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
            url: selectedUrl,
            withZoom: true,
            withLocalStorage: true,
            hidden: true,
            initialChild: Container(
              color: Color.fromRGBO(34, 211, 95, 100),
              child: const Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ),
        ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Instance of WebView plugin
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  // On destroy stream
  StreamSubscription _onDestroy;

  // On urlChanged stream
  StreamSubscription<String> _onUrlChanged;

  // On urlChanged stream
  StreamSubscription<WebViewStateChanged> _onStateChanged;

  StreamSubscription<WebViewHttpError> _onHttpError;

  StreamSubscription<double> _onProgressChanged;

  StreamSubscription<double> _onScrollYChanged;

  StreamSubscription<double> _onScrollXChanged;

  final _urlCtrl = TextEditingController(text: selectedUrl);

  final _codeCtrl = TextEditingController(text: 'window.navigator.userAgent');

  final _scaffoldKey = GlobalKey<ScaffoldState>();

  final _history = [];

  @override
  void initState() {
    super.initState();

    flutterWebViewPlugin.close();

    _urlCtrl.addListener(() {
      selectedUrl = _urlCtrl.text;
    });

    // Add a listener to on destroy WebView, so you can make came actions.

    // Add a listener to on url changed
    _onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          _history.add('onUrlChanged: $url');
        });
      }
    });

    _onProgressChanged =
        flutterWebViewPlugin.onProgressChanged.listen((double progress) {
      if (mounted) {
        setState(() {
          _history.add('onProgressChanged: $progress');
        });
      }
    });

    _onScrollYChanged =
        flutterWebViewPlugin.onScrollYChanged.listen((double y) {
      if (mounted) {
        setState(() {
          _history.add('Scroll in Y Direction: $y');
        });
      }
    });

    _onScrollXChanged =
        flutterWebViewPlugin.onScrollXChanged.listen((double x) {
      if (mounted) {
        setState(() {
          _history.add('Scroll in X Direction: $x');
        });
      }
    });

    _onStateChanged =
        flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if (mounted) {
        setState(() {
          _history.add('onStateChanged: ${state.type} ${state.url}');
        });
      }
    });

    _onHttpError =
        flutterWebViewPlugin.onHttpError.listen((WebViewHttpError error) {
      if (mounted) {
        setState(() {
          _history.add('onHttpError: ${error.code} ${error.url}');
        });
      }
    });
  }

  @override
  void dispose() {
    // Every listener should be canceled, the same should be done with this stream.
    _onDestroy.cancel();
    _onUrlChanged.cancel();
    _onStateChanged.cancel();
    _onHttpError.cancel();
    _onProgressChanged.cancel();
    _onScrollXChanged.cancel();
    _onScrollYChanged.cancel();

    flutterWebViewPlugin.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      primary: true,
      key: _scaffoldKey,
      url: selectedUrl,
      appBar: AppBar(
        title: const Text('Widget WebView'),
      ),
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.redAccent,
        child: const Center(child: CircularProgressIndicator()),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: <Widget>[
            IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: () {
                flutterWebViewPlugin.goBack();
              },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_forward_ios),
              onPressed: () {
                flutterWebViewPlugin.goForward();
              },
            ),
            IconButton(
              icon: const Icon(Icons.autorenew),
              onPressed: () {
                flutterWebViewPlugin.reload();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Kodumuz bu
Çağırmak içinse

RaisedButton(
                    child: Text("Video Alternatif link"),
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => VideoWebview(
                                    adres: "https://www.youtube.com/",
                                  )));
                    },
                  )

Selam hocam ellerinize sağlık, tam istediğim gibi çalıştı 😄 Ancak öğrenmek için kodlarınızı incelediğimde;

Statefull class ının içinde belirlediğiniz değişken ve constructor ları ile State class ının içinde de kullanmışsınız, orasını yapmamıştım :/ Eksiğimi orada görmüş oldum. Ancak aşağıdaki resimde belirttiğim 2 ve 4 numaranın neden kullanıldığını anlamadım 🙁

https://prnt.sc/qa3ea3

AlperDuzgun Bunlar en başta gönderdiğiniz url adresini widgetlera göndermek için

    2 months later
    a month later
    10 days later

    Merhabalar. Flutterda webview_flutter eklentisi ile iframe kodunu ekleyip çalıştırdığımda Samsung telefonlarda butonları çalışmıyor. Bu konuda ne yapabiliriz. 👍 Kodu pc başına geçince atacağım. 👍

    body: Container(
    decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent, width: 3)),
    child: WebView(
    initialUrl: Uri.dataFromString(
    '<iframe width="500" height="469" src="https://chessmicrobase.com/microbases/10/games/207?token=a9l2ytwy&embedded=1#hmcp-" frameborder="0"></iframe>',
    mimeType: 'text/html')
    .toString(),
    javascriptMode: JavascriptMode.unrestricted,
    )),

    Flutter Embed kodunu bu şekilde veriyor hocam. O yüzden. Sorun iframe kaynaklı olabilir mi. ?

    6 months later

    Webview’de kullanıcının tokeninin url’de tutuyorum ve urller dinamik olarak geliyor
    Gelen urller’e tokeni ekleyip webview’de göstermek istiyorum nasıl yapabilirim hocam.
    Örnek : …/activity/seans gelenurl
    Yapmak istediğim her dinamik url için: …/activity/seans/?user_code=21312312312

    Yardımcı olursanız çok sevinirim.İyi Çalışmalar 🙂

    a month later

    Merhaba web view ile anlık bildirimler nasıl gönderilir? Mesela kullanıcıya uygulamadan mesaj geldiğinde telefonuna bildirim göndermek istiyoruz bunu nasıl yapabiliriz?

    AysemaDoyuran webview ile bildirim alamazsınız. Webview uygulama kapatıldığında bellekten silinir. Uygulama kapatıldığında arka planda çalışacak fcm veya onesignal gibi bir yapı kurmanız gerek.