Flutter弹出提示与Webview集成插件flutter_toast_alert_webview的使用

Flutter弹出提示与Webview集成插件flutter_toast_alert_webview的使用

flutter_toast

A new Flutter plugin to show toast in android and ios.

使用说明

此插件具有独特的功能，可以在Android上显示Toast、AlertDialog和WebView，在iOS上显示AlertDialog。

使用步骤

以下是使用flutter_toast_alert_webview插件的具体步骤及完整示例代码。

安装插件

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_toast_alert_webview: ^版本号

然后执行以下命令安装依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用该插件来实现Toast提示、弹窗提示以及Webview集成的功能。

示例代码

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

import 'package:flutter/services.dart';
import 'package:flutter_toast_alert_webview/flutter_toast.dart'; // 导入插件

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化Flutter绑定
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown'; // 存储平台版本信息
  final _flutterToastPlugin = FlutterToast(); // 初始化插件实例

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      // 获取平台版本信息
      platformVersion = await _flutterToastPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Customized Plugin'), // 设置应用标题
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 主轴方向居中
            crossAxisAlignment: CrossAxisAlignment.center, // 次轴方向居中
            children: [
              // 显示Toast按钮
              MaterialButton(
                onPressed: () async {
                  await initPlatformState(); // 获取平台版本信息
                  _flutterToastPlugin.showToast("My Platform Version is $_platformVersion"); // 显示Toast
                },
                color: Colors.green, // 按钮背景颜色
                child: const Text("Show Toast"), // 按钮文字
              ),
              const SizedBox(height: 20), // 添加间距
              // 显示弹窗按钮
              MaterialButton(
                onPressed: () {
                  _flutterToastPlugin.showAlert(); // 显示弹窗
                },
                color: Colors.pink, // 按钮背景颜色
                child: const Text("Show Alert"), // 按钮文字
              ),
              const SizedBox(height: 20), // 添加间距
              // 打开WebView按钮
              MaterialButton(
                onPressed: () {
                  _flutterToastPlugin.openWebView('https://www.google.com/'); // 打开WebView
                },
                color: Colors.blue, // 按钮背景颜色
                child: const Text("Open WebView"), // 按钮文字
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter弹出提示与Webview集成插件flutter_toast_alert_webview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter弹出提示与Webview集成插件flutter_toast_alert_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想在WebView中集成弹出提示（如Toast或Alert），可以使用flutter_toast_alert_webview插件。这个插件允许你在WebView中显示Toast或Alert消息，并且可以与WebView的内容进行交互。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_toast_alert_webview插件的依赖：

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

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

2. 使用flutter_toast_alert_webview插件

2.1 初始化WebView

你可以使用flutter_webview_plugin或webview_flutter来创建WebView。这里以webview_flutter为例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_toast_alert_webview/flutter_toast_alert_webview.dart';

class WebViewExample extends StatefulWidget {
  [@override](/user/override)
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with Toast & Alert'),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        onPageFinished: (String url) {
          // 页面加载完成后，注入JavaScript代码
          _controller.evaluateJavascript(
            FlutterToastAlertWebview.getToastScript('Hello from Flutter!'),
          );
        },
        javascriptChannels: <JavascriptChannel>{
          _toastJavascriptChannel(context),
        },
      ),
    );
  }

  JavascriptChannel _toastJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'FlutterToast',
        onMessageReceived: (JavascriptMessage message) {
          // 处理来自WebView的消息
          FlutterToastAlertWebview.showToast(context, message.message);
        });
  }
}

2.2 在WebView中显示Toast

在上面的代码中，我们使用了FlutterToastAlertWebview.getToastScript来生成一个JavaScript代码，该代码会在WebView中显示一个Toast消息。你可以通过evaluateJavascript方法将这个脚本注入到WebView中。

2.3 处理来自WebView的消息

我们创建了一个JavascriptChannel来处理来自WebView的消息。当WebView中的JavaScript代码调用FlutterToast.postMessage('message')时，Flutter会接收到这个消息，并显示一个Toast。

3. 在WebView中使用Alert

类似地，你可以在WebView中使用Alert。你可以通过FlutterToastAlertWebview.getAlertScript生成一个JavaScript代码，然后在WebView中执行它。

_controller.evaluateJavascript(
  FlutterToastAlertWebview.getAlertScript('This is an alert from Flutter!'),
);

4. 完整示例

以下是一个完整的示例，展示了如何在WebView中集成Toast和Alert：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_toast_alert_webview/flutter_toast_alert_webview.dart';

class WebViewExample extends StatefulWidget {
  [@override](/user/override)
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with Toast & Alert'),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        onPageFinished: (String url) {
          // 页面加载完成后，注入JavaScript代码
          _controller.evaluateJavascript(
            FlutterToastAlertWebview.getToastScript('Hello from Flutter!'),
          );
          _controller.evaluateJavascript(
            FlutterToastAlertWebview.getAlertScript('This is an alert from Flutter!'),
          );
        },
        javascriptChannels: <JavascriptChannel>{
          _toastJavascriptChannel(context),
        },
      ),
    );
  }

  JavascriptChannel _toastJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'FlutterToast',
        onMessageReceived: (JavascriptMessage message) {
          // 处理来自WebView的消息
          FlutterToastAlertWebview.showToast(context, message.message);
        });
  }
}
回到顶部