feat: dark mode in android webviews

This commit is contained in:
Daniel Yukio 2024-08-28 15:54:10 -03:00
parent d286daca53
commit 142dd715b8
3 changed files with 103 additions and 51 deletions

View File

@ -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(

View File

@ -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)),
),
), ),
); );
} }

View File

@ -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) {}
''';
}