feat: dark mode in android webviews
This commit is contained in:
parent
d286daca53
commit
142dd715b8
|
@ -1,8 +1,10 @@
|
||||||
import 'dart:io' show Platform;
|
import 'dart:io' show Platform;
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/scheduler.dart';
|
||||||
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
|
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
|
||||||
import 'package:hub/app_state.dart';
|
import 'package:hub/app_state.dart';
|
||||||
|
import 'package:hub/shared/utils/webview_util.dart';
|
||||||
import 'package:url_launcher/url_launcher_string.dart';
|
import 'package:url_launcher/url_launcher_string.dart';
|
||||||
import 'package:webview_flutter/webview_flutter.dart';
|
import 'package:webview_flutter/webview_flutter.dart';
|
||||||
|
|
||||||
|
@ -92,6 +94,16 @@ class _FastPassPageWidgetState extends State<FastPassPageWidget> {
|
||||||
_controllerAll.runJavaScript(data);
|
_controllerAll.runJavaScript(data);
|
||||||
_controllerAll.runJavaScript(backNavigation);
|
_controllerAll.runJavaScript(backNavigation);
|
||||||
},
|
},
|
||||||
|
onPageFinished: (String url) {
|
||||||
|
bool isDarkMode = SchedulerBinding.instance
|
||||||
|
.platformDispatcher.platformBrightness ==
|
||||||
|
Brightness.dark;
|
||||||
|
|
||||||
|
if (isDarkMode) {
|
||||||
|
_controllerAll
|
||||||
|
.runJavaScript(WebviewUtil.jsEnableDarkMode);
|
||||||
|
}
|
||||||
|
},
|
||||||
onNavigationRequest: (NavigationRequest request) {
|
onNavigationRequest: (NavigationRequest request) {
|
||||||
if (request.url.startsWith('http') ||
|
if (request.url.startsWith('http') ||
|
||||||
request.url.startsWith(
|
request.url.startsWith(
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
import 'dart:developer';
|
import 'dart:developer';
|
||||||
|
|
||||||
|
import 'package:flutter/scheduler.dart';
|
||||||
import 'package:hub/app_state.dart';
|
import 'package:hub/app_state.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
|
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
|
||||||
|
import 'package:hub/shared/utils/webview_util.dart';
|
||||||
import 'package:url_launcher/url_launcher_string.dart';
|
import 'package:url_launcher/url_launcher_string.dart';
|
||||||
import 'package:webview_flutter/webview_flutter.dart';
|
import 'package:webview_flutter/webview_flutter.dart';
|
||||||
import 'dart:io' show Platform;
|
import 'dart:io' show Platform;
|
||||||
|
@ -47,62 +49,80 @@ class _ReservationPageWidgetState extends State<ReservationPageWidget> {
|
||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
body: Platform.isIOS
|
body: Platform.isIOS
|
||||||
? InAppWebView(
|
? InAppWebView(
|
||||||
initialUrlRequest: URLRequest(url: WebUri(url)),
|
initialUrlRequest: URLRequest(url: WebUri(url)),
|
||||||
initialSettings: InAppWebViewSettings(
|
initialSettings: InAppWebViewSettings(
|
||||||
allowsBackForwardNavigationGestures: true,
|
allowsBackForwardNavigationGestures: true,
|
||||||
javaScriptEnabled: true,
|
javaScriptEnabled: true,
|
||||||
),
|
),
|
||||||
onWebViewCreated: (controller) async {
|
onWebViewCreated: (controller) async {
|
||||||
_controllerIOS = controller;
|
_controllerIOS = controller;
|
||||||
},
|
|
||||||
onLoadStop: (controller, url) async {
|
|
||||||
await controller.evaluateJavascript(source: "window.localStorage.setItem('fre-token', '\"${widget.freToken}\"')");
|
|
||||||
await controller.evaluateJavascript(source: "window.localStorage.setItem('fre-user-data', '${widget.freUserData}')");
|
|
||||||
await controller.evaluateJavascript(source: "window.localStorage.setItem('enableBackButton', 'true')");
|
|
||||||
},
|
|
||||||
onUpdateVisitedHistory: (controller, uri, isVisited) {
|
|
||||||
if (uri.toString().contains('/hub/home')) {
|
|
||||||
Navigator.pop(context);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
)
|
|
||||||
: WebViewWidget(
|
|
||||||
controller: _controllerAll = WebViewController()
|
|
||||||
..clearCache()
|
|
||||||
..clearLocalStorage()
|
|
||||||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
|
||||||
..setBackgroundColor(const Color(0x00000000))
|
|
||||||
..setNavigationDelegate(
|
|
||||||
NavigationDelegate(
|
|
||||||
onProgress: (int progress) {},
|
|
||||||
onPageStarted: (String url) {
|
|
||||||
final String token = "localStorage.setItem('fre-token', '\"${widget.freToken}\"');";
|
|
||||||
final String data = "localStorage.setItem('fre-user-data', '${widget.freUserData}');";
|
|
||||||
const String backNavigation = "localStorage.setItem('enableBackButton', 'true');";
|
|
||||||
|
|
||||||
_controllerAll.runJavaScript(token);
|
|
||||||
_controllerAll.runJavaScript(data);
|
|
||||||
_controllerAll.runJavaScript(backNavigation);
|
|
||||||
},
|
},
|
||||||
onNavigationRequest: (NavigationRequest request) {
|
onLoadStop: (controller, url) async {
|
||||||
if (request.url.startsWith('http') ||
|
await controller.evaluateJavascript(
|
||||||
request.url
|
source:
|
||||||
.startsWith('https://api.whatsapp.com/send') ||
|
"window.localStorage.setItem('fre-token', '\"${widget.freToken}\"')");
|
||||||
request.url.startsWith('https://wa.me')) {
|
await controller.evaluateJavascript(
|
||||||
launchUrlString(request.url);
|
source:
|
||||||
return NavigationDecision.prevent;
|
"window.localStorage.setItem('fre-user-data', '${widget.freUserData}')");
|
||||||
}
|
await controller.evaluateJavascript(
|
||||||
return NavigationDecision.prevent;
|
source:
|
||||||
|
"window.localStorage.setItem('enableBackButton', 'true')");
|
||||||
},
|
},
|
||||||
onUrlChange: (url) {
|
onUpdateVisitedHistory: (controller, uri, isVisited) {
|
||||||
if (url.url.toString().contains('/hub/home')) {
|
if (uri.toString().contains('/hub/home')) {
|
||||||
Navigator.pop(context);
|
Navigator.pop(context);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
)
|
||||||
|
: WebViewWidget(
|
||||||
|
controller: _controllerAll = WebViewController()
|
||||||
|
..clearCache()
|
||||||
|
..clearLocalStorage()
|
||||||
|
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||||||
|
..setBackgroundColor(const Color(0x00000000))
|
||||||
|
..setNavigationDelegate(
|
||||||
|
NavigationDelegate(
|
||||||
|
onProgress: (int progress) {},
|
||||||
|
onPageStarted: (String url) {
|
||||||
|
final String token =
|
||||||
|
"localStorage.setItem('fre-token', '\"${widget.freToken}\"');";
|
||||||
|
final String data =
|
||||||
|
"localStorage.setItem('fre-user-data', '${widget.freUserData}');";
|
||||||
|
const String backNavigation =
|
||||||
|
"localStorage.setItem('enableBackButton', 'true');";
|
||||||
|
|
||||||
|
_controllerAll.runJavaScript(token);
|
||||||
|
_controllerAll.runJavaScript(data);
|
||||||
|
_controllerAll.runJavaScript(backNavigation);
|
||||||
|
},
|
||||||
|
onPageFinished: (String url) {
|
||||||
|
bool isDarkMode = SchedulerBinding.instance
|
||||||
|
.platformDispatcher.platformBrightness ==
|
||||||
|
Brightness.dark;
|
||||||
|
|
||||||
|
if (isDarkMode) {
|
||||||
|
_controllerAll
|
||||||
|
.runJavaScript(WebviewUtil.jsEnableDarkMode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onNavigationRequest: (NavigationRequest request) {
|
||||||
|
if (request.url.startsWith('http') ||
|
||||||
|
request.url.startsWith(
|
||||||
|
'https://api.whatsapp.com/send') ||
|
||||||
|
request.url.startsWith('https://wa.me')) {
|
||||||
|
launchUrlString(request.url);
|
||||||
|
return NavigationDecision.prevent;
|
||||||
|
}
|
||||||
|
return NavigationDecision.prevent;
|
||||||
|
},
|
||||||
|
onUrlChange: (url) {
|
||||||
|
if (url.url.toString().contains('/hub/home')) {
|
||||||
|
Navigator.pop(context);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
..loadRequest(Uri.parse(url)),
|
||||||
),
|
),
|
||||||
)
|
|
||||||
..loadRequest(Uri.parse(url)),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
class WebviewUtil {
|
||||||
|
static const jsEnableDarkMode = '''
|
||||||
|
try {
|
||||||
|
for (let s = 0; s < window.document.styleSheets.length; s++) {
|
||||||
|
for (let i = 0; i < window.document.styleSheets[s].cssRules.length; i++) {
|
||||||
|
const rule = window.document.styleSheets[s].cssRules[i];
|
||||||
|
|
||||||
|
if (rule?.media?.mediaText?.includes('prefers-color-scheme')) {
|
||||||
|
rule.media.appendMedium('(prefers-color-scheme: light)');
|
||||||
|
rule.media.appendMedium('(prefers-color-scheme: dark)');
|
||||||
|
|
||||||
|
if (rule.media.mediaText.includes('original')) {
|
||||||
|
rule.media.deleteMedium("original-prefers-color-scheme");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {}
|
||||||
|
''';
|
||||||
|
}
|
Loading…
Reference in New Issue