在 Flutter WebView 中强制使用浅色或深色主题

时间:2021-04-22 13:18:59

标签: flutter

我使用 webview_flutter 来显示网站。问题是,该网站以黑暗模式打开。我尝试将 MaterialApp 主题和 darkTheme 属性设置为 ThemeData.light(),但 webview 不尊重它并采用设备的默认主题。切换设备主题反映在网络视图中。

如何明确地为 WebView 小部件强制实施浅色/深色主题?

enter image description here

这里是 main.dart 片段

    import 'dart:io';
    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    void main() => runApp(MyApp());
      
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {

            //please explain this one as well
            // SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
            //         statusBarBrightness: Brightness.dark) // Or Brightness.dark
            //     );
            return MaterialApp(
              themeMode: ThemeMode.light,
              theme: ThemeData.light(),
              darkTheme: ThemeData.light(),
              debugShowCheckedModeBanner: false,
              title: 'Flutter site',
              home: SafeArea(
                child: WebViewExample(),
              ),
            );
          }
        }
        
        class WebViewExample extends StatefulWidget {
          @override
          WebViewExampleState createState() => WebViewExampleState();
        }
        
        class WebViewExampleState extends State<WebViewExample> {
          @override
          void initState() {
            super.initState();
            // Enable hybrid composition.
            if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
            // if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {  }
          }
        
          @override
          Widget build(BuildContext context) {
            return WebView(
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: 'https://flutter.dev.',
            );
          }
        }

0 个答案:

没有答案