Flutter暗黑模式WebView插件simple_dark_mode_webview的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter暗黑模式WebView插件simple_dark_mode_webview的使用

简介

simple_dark_mode_webview 是一个简单的实现暗黑模式或暗黑主题的WebView插件。其核心思想非常简单，即在HTML文本的整个 <body> 标签中包裹上暗黑模式的样式。

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 simple_dark_mode_webview 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_dark_mode_webview: ^1.0.0  # 请使用最新版本号

然后运行 flutter pub get 来安装依赖。

2. 创建应用

接下来，我们创建一个简单的Flutter应用来演示如何使用 simple_dark_mode_webview 插件。

示例代码

以下是完整的示例代码，展示了如何使用 simple_dark_mode_webview 插件来实现暗黑模式的WebView。

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_dark_mode_webview/simpledarkmodewebview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Dark Mode Webview Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // 设置暗黑主题
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Simple Dark Mode Webview Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.grey,
              child: Text(
                '此部件特别适用于显示静态HTML文件！',
              ),
            ),
            Expanded(
              child: FutureBuilder(
                future: rootBundle.loadString('lib/assets/sample_policy.html'),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return Text('加载中...');
                  } else {
                    if(snapshot.data is String) {
                      return SimpleDarkModeAdaptableWebView(
                        snapshot.data as String,

                        // 指定HTML的编码格式
                        encoding: Encoding.getByName('utf-8'),

                        // 注册手势识别器，如原生WebView
                        gestureRecognizers: Set()
                          ..add(Factory<TapGestureRecognizer>(
                                  () => TapGestureRecognizer()
                                ..onTapDown = (tap) {
                                  final snackBar = SnackBar(
                                      content: Text('WebView被点击了。'));
                                  // Scaffold.of(context).showSnackBar(snackBar);
                                  ScaffoldMessenger.of(context)
                                      .showSnackBar(snackBar);
                                })),
                      );
                    } else {
                      return Text('无效的数据。');
                    }
                  }
                },
              )
            )
          ],
        ),
      ),
    );
  }
}

3. HTML文件

确保你有一个名为 sample_policy.html 的静态HTML文件放在 assets 目录下，并且在 pubspec.yaml 文件中配置了资源路径：

flutter:
  assets:
    - lib/assets/sample_policy.html

更多关于Flutter暗黑模式WebView插件simple_dark_mode_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter暗黑模式WebView插件simple_dark_mode_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 simple_dark_mode_webview 插件在 Flutter 中实现暗黑模式的 WebView 的代码示例。

首先，确保你的 Flutter 项目已经配置好，并且在 pubspec.yaml 文件中添加了 simple_dark_mode_webview 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_dark_mode_webview: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 项目中使用 SimpleDarkModeWebView 组件。以下是一个完整的示例代码，展示了如何根据系统主题切换 WebView 的暗黑模式：

import 'package:flutter/material.dart';
import 'package:simple_dark_mode_webview/simple_dark_mode_webview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Dark Mode Example',
      theme: ThemeData(
        brightness: Brightness.light, // 默认亮色主题
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark, // 暗黑主题
      ),
      themeMode: ThemeMode.system, // 根据系统主题切换
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> with WidgetsBindingObserver {
  SimpleDarkModeWebViewController? _controller;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    _controller?.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      // 如果应用从后台恢复，可以在这里做一些处理，比如刷新 WebView
    }
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final bool isDarkMode = theme.brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Dark Mode Example'),
      ),
      body: SimpleDarkModeWebView(
        initialUrl: 'https://www.example.com', // 替换为你想要加载的URL
        javascriptMode: JavascriptMode.unrestricted,
        darkMode: isDarkMode,
        onWebViewCreated: (SimpleDarkModeWebViewController webViewController) {
          _controller = webViewController;
        },
        onPageFinished: (String url) {
          // 页面加载完成后的回调
          print("Page finished loading: $url");
        },
        onNavigationDeltaScrolling: (double deltaX, double deltaY) {
          // 滚动事件的回调
          print("Scrolling deltaX: $deltaX, deltaY: $deltaY");
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个 WebViewPage，它包含一个 SimpleDarkModeWebView 组件。我们根据 ThemeData 的 brightness 属性来确定当前是否处于暗黑模式，并将这个值传递给 SimpleDarkModeWebView 的 darkMode 属性。

此外，我们还添加了 WidgetsBindingObserver 来监听应用的生命周期状态，以便在需要时处理 WebView 的行为（虽然在这个简单示例中并未实际使用）。

运行这个应用，并根据系统主题（或在 Flutter 应用中手动切换主题）来查看 WebView 的暗黑模式效果。

请确保你使用的 simple_dark_mode_webview 插件版本支持暗黑模式功能，并根据需要调整代码中的 URL 和其他配置。

回到顶部