flutter截图,fl怎么截图

Flutter中对webview截图

最近碰到个需求，在flutter中对webview进行截图，一想这还不简单，直接用Stack在webview上面放个按钮不就行了，然鹅实际试了一下发现，

现在讲下对两种组件进行截图的方式：

对普通的组件进行截图的话，使用RepaintBoundary包裹需要截图的组件就行。

官方的webivew的层级太高会无法展示按钮，且通过RepaintBoundary截图是空白的。

需要使用 flutter_inappwebview 插件，这个插件有自带的截图功能

如果想在webview加载完时就自动截图的话 则需要在InAppWebView的onLoadStop中操作

相关问答

Q1: Flutter 与 Android 互调

在做这个小 demo 的时候，遇到了一些坑，到文章发布 坑 还是没有填好，无奈，只得用了别的方式实现了本篇文章的功能。

我这个人的缺点就是 爱钻牛角尖，哎

废话不多说，看效果图

那么，我们开始吧！

我们先看界面逻辑，先不考虑功能，然后将此布局给予上层

注意看这一行

这行其实作用就是声明了 链接 Android 原生的 MethodChannel

当然了，里面的内容随意， 你看我写的多随意

而真正的调用逻辑是

对 就是 invokeMethod 这个方法

当然这个方法的使用还有「带参数的使用方法」

再来看下方法的实现

ok，到此，Flutter 的逻辑就基本走完了，现在来看下 Android 的逻辑

这里，是我浪费了点时间的一个坑，我以为我可以直接在 Flutter 的项目结构下去更改 Android 的项目，结果证明我还是 too young 了，好了，说下我的方法，我是直接切换到了 Android 的项目结构，如下图

这样就可以进入 Android 的结构了

很简单，你想实现相互调用，那么肯定得有 暗号 吧

这里是通过

来实现的

其中 MethodCall 能够判断 Flutter 传递过来什么名称的参数，得到参数的内容等

而 MethodChannel.Result 则能够返回结果给 Flutter

上面的截图就是通过这两个类来实现的逻辑

定义依赖

定义 Bean

定义网络接口

实现 RetrofitHelper

通过 jakewharton 封装的 rxrelay 结合 rxjava2 实现 rxbus

Android Flutter 互调

MethodChannel 在 Flutter 及 Android 中的使用

Flutter 页面跳转

RxBus 封装

Bingo

谢谢小伙伴的关注、收藏、点赞，谢谢~~

Q2: 怎么在flutter中实现点击按钮发送高德地图上自己实时位置的短信？怎么让位置信息成为短信的内容呢

如果你要手动操作的话，你可以选择截图，然后发送图片就可以了。

Q3: Vue前端转Flutter一（环境配置）

（*注：以下仅个人配置过程参考，系统win7-64）

所需软件

vsCode，Android Studio， MuMu模拟器 （直连手机调试的话就不需要了）

配置过程

1、Flutter安装

安装时忘记截图，具体可参考链接 flutter中文网 相关教程+ 百度 ，现在网上教程很多，多踩点坑总会成功的。

2、MuMu模拟器调试时需进行相关配置

（*注：直连手机调试可忽略以下；执行以下操作需要在执行flutter doctor成功后，flutter run执行前）

（1）mumu模拟器端口监听，需要执行

（2）mumu模拟器调试flutter run可能会报错，可以改成，具体原因可直接百度“--enable-software-rendering”

3、如需调试ios端可尝试虚拟机+macOS+xCode

vmware+macOs可参考链接 VMware15安装MacOS系统 ，笔者按照该步骤已安装成功

Q4: Mac环境下的flutter配置及安装

最近在公司比较空闲，正好又重新申请换了台m1开发。顺便花点时间把flutter配置和安装时遇到的问题梳理了一下，相关报错截图未保存，纯属记录自己的flutter之旅，那现在就开始吧～

安装可参考链接：Flutter中文网