Created
April 2, 2019 02:22
-
-
Save yumi0629/1e7e1061734fcd4de07ca73a13d83846 to your computer and use it in GitHub Desktop.
Flutter_webview_js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Please add below in ‘pubspec.yaml’: | |
webview_flutter: ^0.3.5+2 | |
oktoast: ^2.0.0 | |
import 'dart:async'; | |
import 'package:flutter/material.dart'; | |
import 'package:webview_flutter/webview_flutter.dart'; | |
import 'package:oktoast/oktoast.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return OKToast( | |
child: MaterialApp( | |
title: 'Flutter Demo', | |
theme: ThemeData( | |
// This is the theme of your application. | |
// | |
// Try running your application with "flutter run". You'll see the | |
// application has a blue toolbar. Then, without quitting the app, try | |
// changing the primarySwatch below to Colors.green and then invoke | |
// "hot reload" (press "r" in the console where you ran "flutter run", | |
// or simply save your changes to "hot reload" in a Flutter IDE). | |
// Notice that the counter didn't reset back to zero; the application | |
// is not restarted. | |
primarySwatch: Colors.blue, | |
), | |
home: WebViewPage(), | |
), | |
); | |
} | |
} | |
class WebViewPage extends StatefulWidget { | |
@override | |
State<StatefulWidget> createState() { | |
return WebViewPageState(); | |
} | |
} | |
class WebViewPageState extends State<WebViewPage> { | |
JavascriptChannel _alertJavascriptChannel(BuildContext context) { | |
return JavascriptChannel( | |
name: 'Toast', | |
onMessageReceived: (JavascriptMessage message) { | |
showToast(message.message); | |
}); | |
} | |
final Completer<WebViewController> _controller = | |
Completer<WebViewController>(); | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: const Text('Flutter WebView example'), | |
), | |
body: Builder(builder: (BuildContext context) { | |
return WebView( | |
initialUrl: 'http://bin.amazeui.org/ruviyabibu', | |
javascriptMode: JavascriptMode.unrestricted, | |
onWebViewCreated: (WebViewController webViewController) { | |
// _controller = webViewController; | |
_controller.complete(webViewController); | |
}, | |
javascriptChannels: <JavascriptChannel>[ | |
_alertJavascriptChannel(context), | |
].toSet(), | |
navigationDelegate: (NavigationRequest request) { | |
if (request.url.startsWith('js://webview')) { | |
showToast('JS调用了Flutter By navigationDelegate'); | |
print('blocking navigation to $request}'); | |
return NavigationDecision.prevent; | |
} | |
print('allowing navigation to $request'); | |
return NavigationDecision.navigate; | |
}, | |
onPageFinished: (String url) { | |
print('Page finished loading: $url'); | |
}, | |
); | |
}), | |
floatingActionButton: jsButton(), | |
); | |
} | |
Widget jsButton() { | |
return FutureBuilder<WebViewController>( | |
future: _controller.future, | |
builder: (BuildContext context, | |
AsyncSnapshot<WebViewController> controller) { | |
if (controller.hasData) { | |
return FloatingActionButton( | |
onPressed: () async { | |
_controller.future.then((controller) { | |
controller | |
.evaluateJavascript('callJS("visible")') | |
.then((result) {}); | |
}); | |
}, | |
child: Text('call JS'), | |
); | |
} | |
return Container(); | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
兄弟,怎么联系你,有点问题想咨询你一下