Flutter项目中添加Webview（一）添加Flutter插件到项目中

Webview？那还有啥不会使用的，直接找一个小部件，然后将url放上去，再加点儿设置就搞定了～

可是实际开发中总会遇到这样或者那样的问题，该如何处理呢？

例如，我之前碰到一个比较奇特的问题，就是一个网页上面有youtube的播放器，用户没有办法全屏，最终通过override WebChromeClient里面的onHideCustomView和onShowCustomView来解决的。

再比如，有些资源特别大，需要拦截加载本地。

等等等等。

我打算通过 codelabs.developers.google.com/codelabs/fl… 一步一步的查缺补漏。

那让我们先介绍一下，通过这些文章都能学习到什么？

• 在webview中显示网页内容
• 通过webview显示堆叠的Flutter小部件
• 对网页加载进度时间做出响应
• 通过WdbviewController控制webview
• 使用NavigationDeletegate屏蔽网站
• 评估JavaScript表达式
• 使用JavascriptChannels处理JavaScript回调
• 设置、移除、添加或显示Cookie
• 加载并显示资源、文件中的HTML或包含HTML的字符串

首先创建新的Flutter项目

创建Flutter项目有很多种方式，可以通过Android Studio和Visual Studio Code提供的工具创建。

或者使用简易的命令行闯将

flutter create webview_in_flutter

接下来将Webview Flutter插件作为依赖项添加

cd webview_in_flutter
flutter pub add webview_flutter

查看一下pubspec.yaml文件，就会发现webview_flutter已经被添加了

这里面需要注意一下，Android的最小支持版本要改成19或者20

接下来运行一下程序，这个程序是我们一行也没有修改并且添加了webview_flutter插件的程序