AlperDuzgun Elinize Sağlık
Flutter ile WebView kullanımı
Flutter Ne için hocam?
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/",
)));
},
)
- Edited
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
AlperDuzgun Bunlar en başta gönderdiğiniz url adresini widgetlera göndermek için
Flarum veya discourse için de uygulanabilir mi bu?
fakruzaruret evet
Flutter aynı bu yöntemi deneyeceğiz farklı bir şey yapmadan öyle mi?
fakruzaruret evet
Ben daha önce denediydim
Flutter dependency nasıl giriyoruz yeniyim pek bilmiyorum.
fakruzaruret Kastınız ne anlamadım hocam
Flutter hallettim hocam sıkıntı yok.
fakruzaruret Elinize sağlık
- Edited
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,
)),
UurKorkmaz Neden iframe yapma gereği duydunuz?
Flutter Embed kodunu bu şekilde veriyor hocam. O yüzden. Sorun iframe kaynaklı olabilir mi. ?
UurKorkmaz Olabilir
Direkt siteyi deneyn birde
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
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.