Flutter网页视图与提示弹窗插件toast_alert_webview的使用

flutter_toast #

这是一个新的Flutter插件，用于在Android和iOS上显示Toast。

开始使用 #

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

example/lib/main.dart

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

import ‘package:flutter/services.dart’;
import ‘package:toast_alert_webview/toast_alert_webview.dart’;


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


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


@override
State<MyApp> createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
String _platformVersion = ‘Unknown’;
final _toastAlertWebviewPlugin = ToastAlertWebview();


@override
void initState() {
super.initState();
initPlatformState();
}


// 平台消息是异步的，因此我们在异步方法中初始化。
Future<void> initPlatformState() async {
String platformVersion;
// 平台消息可能会失败，所以我们使用try/catch来处理PlatformException。
// 我们还处理消息可能返回null的情况。
try {
platformVersion =
await _toastAlertWebviewPlugin.getPlatformVersion() ?? ‘未知平台版本’;
} on PlatformException {
platformVersion = ‘获取平台版本失败。’;
}


// 如果小部件在异步平台消息仍在飞行时从树中移除，我们希望丢弃回复而不是调用setState来更新我们的非存在外观。
if (!mounted) return;

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

}


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(‘自定义插件’),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MaterialButton(
onPressed: () async {
await initPlatformState();
_toastAlertWebviewPlugin.showToast(“我的平台版本是 $_platformVersion”);
},
color: Colors.green,
child: const Text(“显示Toast”)),
MaterialButton(
onPressed: () {
_toastAlertWebviewPlugin.showAlert();
},
color: Colors.pink,
child: const Text(“显示Alert”)),
MaterialButton(
onPressed: ()  {
_toastAlertWebviewPlugin.openWebView(‘https://www.google.com/’);
},
color: Colors.blue,
child: const Text(“打开WebView”)),
],
),
),
));
}
}


更多关于Flutter网页视图与提示弹窗插件toast_alert_webview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页视图与提示弹窗插件toast_alert_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，如果你想在网页视图中使用提示弹窗插件 toast_alert_webview，你可以按照以下步骤进行操作。这个插件通常用于在WebView中显示Toast或Alert消息。

1. 添加依赖

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

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

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

2. 导入插件

在你的Dart文件中导入插件：

import 'package:toast_alert_webview/toast_alert_webview.dart';

3. 使用WebView和Toast/Alert

你可以使用 WebView 组件来加载网页，并使用 toast_alert_webview 插件来显示Toast或Alert消息。

以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:toast_alert_webview/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://www.example.com',  // 你要加载的网页URL
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        onPageFinished: (String url) {
          // 在页面加载完成后，注入JavaScript代码来显示Toast或Alert
          _controller.evaluateJavascript(
            """
            // 显示Toast消息
            ToastAlertWebView.showToast('Hello, this is a toast message!');
            
            // 显示Alert消息
            ToastAlertWebView.showAlert('Hello, this is an alert message!');
            """
          );
        },
      ),
    );
  }
}
回到顶部