Flutter webview实现以及Appbar和手机返回键的监听

最新推荐文章于 2024-08-19 18:31:48 发布

椎名月华

最新推荐文章于 2024-08-19 18:31:48 发布

阅读量7.2k

点赞数 1

文章标签： Flutter 返回键监听 webview

本文链接：https://blog.csdn.net/qq_39347285/article/details/86219020

版权

本文介绍了在Flutter中使用flutter_webview_plugin插件实现webview加载网页，并展示了如何监听Appbar及手机返回键的操作。在Android中，webview是常见的展示HTML页面的方式，Flutter虽然原生不支持，但可以通过插件实现。文章详细说明了在pubspec.yaml配置插件、Dart文件导入及使用方法，并提到webview与Flutter Dialog的兼容问题。同时，利用WillPopScope监听返回键事件。

摘要由CSDN通过智能技术生成

webview部分

在Android中我们经常会需要打开一些html前端界面，这个时候我们通常都会使用webview通过url来加载网页，而在Flutter中是否也有类似webview的Widget呢？很可惜，答案是暂时没有，但是却有一个插件可以使用，那就是 flutter_webview_plugin。

flutter_webview_plugin基本使用：

1.要使用flutter_webview_plugin，首先要去pubspec.yaml文件下先配置导入插件

dependencies:
  flutter_webview_plugin: ^0.3.0+2

值得一提的是这个文件对于代码格式有着极高的要求，像Python一样需要严格对齐。
添加以后点击右上角的Packages get等待导入。
2.导入成功后在需要webview的Dart文件下导包

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

我这里因为只是一个Demo，所以我就直接贴源码了：

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    routes: {
      '/':(