android 渐变蒙版_Flutter新手引导蒙版（浮层）

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息 f

lutter中网络请求dio使用分析 视频教程在这里

Flutter 从入门实践到开发一个APP之UI基础篇 视频

Flutter 从入门实践到开发一个APP之开发实战基础篇

flutter跨平台开发一点一滴分析系列文章系列文章 在这里了

---

最终实现的效果演示【左面ios】【右面android】

---

本文将描述 在 flutter 项目中实现新手功能引导框功能
1、flutter_guidance_plugin 插件使用
2、组件 CustomPaint 与 CustomPainter 的使用分析
3、组件 WillPopScope 的使用分析
4、canvas 中手势识别 GestureDetector 使用分析
5、Container 实现蒙版效果
6、Canvas 绘制文本分析

1 pub 引用

在 flutter 项目中的配置文件 pubspec.yaml 中添加依赖 插件源码在这里

#新手蒙版引导插件
  flutter_guidance_plugin:
    #git 方式依赖
    git:
      #仓库地址
      url: https://github.com/zhaolongs/flutter_guidance_plugin.git
      # 分支
      ref: master

1.1 通过git添加依赖

  #新手蒙版引导插件
  flutter_guidance_plugin:
    #git 方式依赖
    git:
      #仓库地址
      url: zhaolongs/flutter_guidance_plugin
      # 分支
      ref: master

1.2 通过[http://pub.flutter-io.cn来添加依赖 ]

flutter_guidance_plugin | Flutter Package​pub.flutter-io.cn

flutter_guidance_plugin: ^0.0.3

2 创建引导使用

导包

import 'package:flutter_guidance_plugin/flutter_guidance_plugin.dart';

创建指引数据

///创建新手指引数据
  randomTestData(){
    
    List<CurvePoint> curvePointList = [];
    for (int i = 0; i < 5; i++) {
    
      ///创建指引
      CurvePoint curvePoint = CurvePoint(0, 0);
      if(i==0){
    
        ///x,y 指定指引位置 从0-1 ，手机屏幕左上角开始为（0，0）位置，右下角为(1,1)
        curvePoint.x = double.parse("0.5");
        curvePoint.y = double.parse("0.17");
        ///为引导框内显示的文字
        curvePoint.tipsMessage = "点击这里可 显示可滑动的引导蒙版";
      }else if(i==1){
    
        curvePoint.x = double.parse("0.5");
        curvePoint.y = double.parse("0