flutter_guidance_plugin 0.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new46

flutter_guidance_plugin #

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
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.1");
        curvePoint.tipsMessage = "点击这里可 再次显示 引导蒙版";
      }else{
        curvePoint.x = double.parse("0.${_randomBit(3)}");
        curvePoint.y = double.parse("0.${_randomBit(3)}");
        curvePoint.tipsMessage = "这是随机的引导消息内容$i";
      }
      curvePointList.add(curvePoint);
    }
    return curvePointList;
  }

在这里我们使用到了 CurvePoint ,这是一个自定义的类,用来保存页面数据行为

class CurvePoint {

  ///x,y 指定指引位置 从0-1 ,手机屏幕左上角开始为(0,0)位置,右下角为(1,1)
  double x;
  double y;
  ///为引导框内显示的文字
  String tipsMessage;
  String nextString;

  CurvePoint(this.x, this.y,
      {this.tipsMessage = "--", this.nextString = "下一步"});
}

然后触发蒙版指引-> 在刚刚进入页面时触发或者点击按钮时触发

  void show1() {
    ///获取模拟数据
    List<CurvePoint>  curvePointList = randomTestData();
    ///参数一 上下文对象
    ///参数二 [curvePointList]用户指引数据集合
    ///参数三 [pointX][pointY] 当 curvePointList 为null 时起作用 可用作只有一个引导指引功能页面
    ///参数五 [isSlide] 为true 时,提示框可以移动
    ///参数六 [logs] 为true 时输出Log日志
    showBeginnerGuidance(context, curvePointList: curvePointList,pointX: 0,pointY: 0,isSlide:false ,logs: true);
  }

  void show2() {
    ///获取模拟数据
    List<CurvePoint>  curvePointList = randomTestData();
    showBeginnerGuidance(context, curvePointList: curvePointList,logs: true,isSlide: true);
  }

最终实现的效果就如上图中所示 源码在这里

3、蒙版效果实现

在这里实现的蒙版效果从两方面来讲:

3.1 一是

我们这里的蒙版引导层实际上是通过 Navigator push 了一个 Widget ,那么我们需要实现 push 出来的新在页面层要保持透明,那么在这里是这样实现的:

  ///背景透明的跳转
  Navigator.of(context).push(PageRouteBuilder(
      opaque: false,
      pageBuilder: (context, animation, secondaryAnimation) {
        ///GuideSplashPage 是引导页面具体实现
        return GuideSplashPage(curvePointList:curvePointList,pointX: pointX,pointY: pointY,textColor: tipsTextColor,isSlide:isSlide,clickCallback:clickCallback);
      }));
}

PageRouteBuilder 在 flutter 中用来自定义路由切换功能,在这里通过 pageBuilder 函数来构建将到 跳转的页面

对于参数 opaque ,我们可以理解为用来配置开启的页面背景是否透明,这里配置的为 false ,如果配置为 true,那么页面背景将不会透明。

在这个 PageRouteBuilder 中,我们还可以添加一个渐变动画,使用页面切换效果体验更佳

  ///背景透明的跳转
  Navigator.of(context).push(PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation, secondaryAnimation) {
      ///GuideSplashPage 是引导页面具体实现
      return GuideSplashPage(
          curvePointList: curvePointList,
          pointX: pointX,
          pointY: pointY,
          textColor: tipsTextColor,
          isSlide: isSlide,
          clickCallback: clickCallback);
    },
    transitionsBuilder: (BuildContext context, Animation<double> animation1,
        Animation<double> animation2, Widget child) {
      ///  渐变过渡
      return FadeTransition(
        ///渐变过渡 0.0-1.0
        opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
          ///动画样式
          parent: animation1,
          ///动画曲线
          curve: Curves.fastOutSlowIn,
        ),),
        child: child,
      );
    },),);

这里我们添加了一个 transitionsBuilder ,它是用来控制页面效果效果的,例如这里添加了一个 FadeTransition 渐变过渡效果

在这里插入图片描述 从上述图片效果中我们可以看到 引导蒙版层出现与消失的时候是有 透明度渐变的效果的。

3.2 二是

当新景透明后,我们需要设置一个如上述图片中的黑色蒙版效果,在这里使用的是 Container 填充整个页面,然后设置一个透明度的背景

 Container(
     color: Color(0x90000000),
     ... ...
)

4 Android 手机中返回键按钮事件的拦截

在我们的蒙版实现页面 GuideSplashPage 中,我们使用到了 组件 WillPopScope,在Flutter中通过WillPopScope来实现返回按钮拦截

  @override
  Widget build(BuildContext context) {
    double padding = (MediaQuery.of(context).size.width / 9);
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    ///在Flutter中通过WillPopScope来实现返回按钮拦截
    return WillPopScope(
        child: Container(
          height: height,
          width: width,
          color: Color(0x90000000),
          child: ...
        ///在Android手机中,当点击后退按钮的时候,会回调此事件
        ///在这里返回 false 表示拦截事件
        onWillPop: () async {
          return Future.value(false);
        });
  }
5 气泡提示实现

其实关于气泡提示实现我们也可以使用一张切图来实现,不过无小编喜欢搞事件,所以在这里使用了 三阶贝塞尔曲线 cubicTo 来绘制这个气泡,三阶贝塞尔曲线核心就是做好 控制点与目标点的计算,如下图小编绘制了坐标分析图

气泡箭头坐标分析图1

气泡箭头坐标分析图2

这的坐标计算代码比较多,所以小编就不放代码了,可以到源码中查看哈,三阶贝塞尔曲线 cubicTo 使用分析在这里。

6 flutter 中 Canvas 绘制文本分析 #

Canvas 中并没有直接像 Android ios 中提供绘制文字的方法,在这里 我们是通过段落构建器来综合实现的绘制文本功能

 ///[textWidth] 文本的宽度
  ///[textOffset] 文本绘制的开始位置 左上角
  ///[text] 绘制的文字内容
  void drawTextFunction(
      double textWidth, Offset textOffset, Canvas canvas, String text,
      {Color textColor = Colors.blue}) {
    ///创建画笔  
    var textPaint = Paint();
    ///设置画笔颜色
    textPaint.color = textColor;
    /// 新建一个段落建造器,然后将文字基本信息填入;
    ui.ParagraphBuilder pb = ui.ParagraphBuilder(ui.ParagraphStyle(
      textAlign: TextAlign.center,
      fontWeight: FontWeight.w400,
      fontStyle: FontStyle.normal,
      fontSize: 15.0,
    ));
    ///设置文字的样式
    pb.pushStyle(ui.TextStyle(color: textColor));
    
    if (text == null || text.length == 0) {
      text = "--";
    } else if (text.length > 20) {
      text = text.substring(0, 20);
      text += "...";
    }
    pb.addText(text);
    // 设置文本的宽度约束
    ui.ParagraphConstraints pc = ui.ParagraphConstraints(width: textWidth);
    // 这里需要先layout,将宽度约束填入,否则无法绘制
    ui.Paragraph paragraph = pb.build()..layout(pc);
    ///偏移量在这里指的是文字左上角的 位置
    canvas.drawParagraph(paragraph, textOffset);
  }
}

需要注意的是这里的ParagraphBuilder TextStyle 我们通过 ui. 别名来调用的,这是因为

import 'dart:ui' as ui; //这里用as取个别名,有库名冲突

import 'package:flutter/material.dart';

在这两个包内,存在相同名字的 ParagraphBuilder 与 TextStyle ,而我们需要使用 ui 包中的,所以在这里通过 别名调用。

7 关于下一步点击事件

在这里,我们不能使用 Button 或者 InkWell 等,也不好使用,因为这里的下一步,我们是通过 Canvas 绘制出来的,Canvas 是不能绘制事件的,而且在这里,我们绘制的 下一步的按钮的位置也是不固定的 下一步点击事件

所以在这里,小编通过

			GestureDetector(
                onTapUp: (TapUpDetails detail) {
                  GuideLogs.e('onTapUp');
                  onTap(context, detail);
                },
                /*横向拖动的开始状态*/
                onHorizontalDragStart: (startDetails) {
                  GuideLogs.e('拖动的开始');
                  if (widget.isSlide) {
                    setState(() {
                      slideOffset = startDetails.globalPosition;
                    });
                  }
                },
                onHorizontalDragUpdate: (startDetails) {
                  GuideLogs.e('位置变化 dx:${startDetails.globalPosition.dx}  dy:${startDetails.globalPosition.dy}');
                  if (widget.isSlide) {
                    setState(() {
                     slideOffset = startDetails.globalPosition;
                    });
                  }
                },
                /*横向拖动的结束状态*/
                onHorizontalDragEnd: (endDetails) {
                  GuideLogs.e('拖动的结束');
                  if (widget.isSlide) {
                    setState(() {
                      slideOffset = Offset.zero;
                    });
                  }
                },
                child: Stack(
                  children: <Widget>[
                    在这里放我们的 CustomPaint 画布绘制的内容
                  ],
                ),
              )

对于 onTap 点击事件来讲,我们这里进行了计算


  ///用户计算下一步的点击事件
  void onTap(BuildContext context, TapUpDetails detail) {
    Offset globalPosition = detail.globalPosition;
    GuideLogs.e("onTapUp 点击了 ${globalPosition.dx}  ${globalPosition.dy}");
    if (nextRect != null) {
      ///获取当前 下一步的区域
      double left = nextRect.left - 60;
      double right = nextRect.right + 60;
      double bottom = nextRect.bottom + 60;
      double top = nextRect.top - 60;
      ///获取当前屏幕上手指点击的位置
      double dx = globalPosition.dx;
      double dy = globalPosition.dy;

      if (dx > left && dx < right && dy > top && dy < bottom) {
        if (currentPointIndex < widget.curvePointList.length - 1) {
          ///如果当前不是最后一页面,那么取出下一页的内容信息
          setState(() {
            currentPointIndex++;
          });
          ///蒙版中点击下一步的回调事件
          if(widget.clickCallback!=null){
            widget.clickCallback(false);
          }
        } else {
          ///如果是最后一页退出蒙版引导 
          if(widget.clickCallback!=null){
            widget.clickCallback(true);
          }
          Navigator.of(context).pop();
        }
      }
    }
  }

  ///记录下一步按钮位置的回调
  void liserClickCallback(Rect rect) {
    this.nextRect = rect;
  }

上述 使用到的 nextRect,是的个Rect,是用来记录引导层中下一步按钮的绘制位置信息的。


完毕,如有疑问请回复,也可以关注一下,小编最近正在搞事情 Java 、mybatis、springboot 、vue、react、Sql、android、ios 会持续记录

0.0.3 #

新增点按水波文效果

0.0.2 #

新增 GlobalKey 自动计算位置信息方法

0.0.1 #

  • TODO: Describe initial release.

example/lib/main.dart

import 'dart:math';

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

void main() => runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  _randomBit(int len) {
    String scopeF = "123456789"; //首位
    String scopeC = "0123456789"; //中间
    String result = "";
    for (int i = 0; i < len; i++) {
      if (i == 1) {
        result = scopeF[Random().nextInt(scopeF.length)];
      } else {
        result = result + scopeC[Random().nextInt(scopeC.length)];
      }
    }
    return result;
  }

  String result = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    Future.delayed(Duration(milliseconds: 5),(){
      show1();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新手引导蒙版"),
      ),
      body: Stack(children:<Widget>[
      Column(children: <Widget>[
        FlatButton(
          key:_key1,
          child: Text("再次显示 引导蒙版"),
          onPressed: () {
            show1();
          },
        ),
        FlatButton(
          key:_key2,
          child: Text("显示 可滑动的引导蒙版"),
          onPressed: () {
            show2();
          },
        ),

        SizedBox(height: 33,),
        FlatButton(
          key:_key3,
          child: Text("显示 可滑动的引导蒙版2"),
          onPressed: () {
            show3();
          },
        ),

      ],),
        Align(alignment: Alignment.bottomCenter,child: Text("测试widghet",key:_key4),),
        Align(alignment: Alignment.bottomRight,child: Text("测试widghet",key:_key5),),
        Align(alignment: Alignment.bottomLeft,child: Text("测试widghet",key:_key6),),
        Align(alignment: Alignment(0,0.3),child: Text("测试widghet",key:_key7),),
        Align(alignment: Alignment(-1,0.3),child: Text("测试widghet",key:_key8),),
        Align(alignment: Alignment(1,0.4),child: Text("测试widghet",key:_key9),),
      ])
    );
  }

  ///创建新手指引数据
  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.1");
        curvePoint.tipsMessage = "点击这里可 再次显示 引导蒙版";
      }else{
        curvePoint.x = double.parse("0.${_randomBit(3)}");
        curvePoint.y = double.parse("0.${_randomBit(3)}");
        curvePoint.tipsMessage = "这是随机的引导消息内容$i";
      }
      curvePointList.add(curvePoint);
    }
    return curvePointList;
  }


  ///这里是不可滑动的模拟数据
  void show1() {
    ///获取模拟数据
    List<CurvePoint>  curvePointList = randomTestData();
    ///参数一 上下文对象
    ///参数二 [curvePointList]用户指引数据集合
    ///参数三 [pointX][pointY] 当 curvePointList 为null 时起作用 可用作只有一个引导指引功能页面
    ///参数五 [isSlide] 为true 时,提示框可以移动
    ///参数六 [logs] 为true 时输出Log日志
    showBeginnerGuidance(context, curvePointList: curvePointList,pointX: 0,pointY: 0,isSlide:false ,logs: true,tipsTextSize: 22);
  }

  ///这里是可滑动的模拟数据
  void show2() {
    ///获取模拟数据
    List<CurvePoint>  curvePointList = randomTestData();
    showBeginnerGuidance(context, curvePointList: curvePointList,logs: true,isSlide: true);
  }
  GlobalKey _key1 = GlobalKey();
  GlobalKey _key2 = GlobalKey();
  GlobalKey _key3 = GlobalKey();
  GlobalKey _key4 = GlobalKey();
  GlobalKey _key5 = GlobalKey();
  GlobalKey _key6 = GlobalKey();
  GlobalKey _key7 = GlobalKey();
  GlobalKey _key8 = GlobalKey();
  GlobalKey _key9 = GlobalKey();
  ///这里是根据KEY 自动计算位置信息的
  void show3(){
    List<GlobalKeyPoint>  globalKeyPointList =[];
    globalKeyPointList.add(GlobalKeyPoint(_key1,tipsMessage: "点击这里可显示蒙版引导效果哈"));
    globalKeyPointList.add(GlobalKeyPoint(_key2,tipsMessage: "点击这里可 再次显示 引导蒙版"));
    globalKeyPointList.add(GlobalKeyPoint(_key3,tipsMessage: "点击这里可 再次显示 引导蒙版 这里是自动计算坐标的"));
//
    globalKeyPointList.add(GlobalKeyPoint(_key4,tipsMessage: "测试widget"));
    globalKeyPointList.add(GlobalKeyPoint(_key5,tipsMessage: "测试widget"));
    globalKeyPointList.add(GlobalKeyPoint(_key6,tipsMessage: "测试widget"));
//
    globalKeyPointList.add(GlobalKeyPoint(_key7,tipsMessage: "测试widget"));
    globalKeyPointList.add(GlobalKeyPoint(_key8,tipsMessage: "测试widget"));
    globalKeyPointList.add(GlobalKeyPoint(_key9,tipsMessage: "测试widget"));

    showBeginnerGuidance(context, globalKeyPointList:globalKeyPointList ,logs: true,isSlide: true);
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_guidance_plugin: ^0.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_guidance_plugin/flutter_guidance_plugin.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
14
Health:
Code health derived from static analysis. [more]
97
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
50
Overall:
Weighted score of the above. [more]
46
Learn more about scoring.

We analyzed this package on Jul 6, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because of import path [package:flutter_guidance_plugin/flutter_guidance_plugin.dart] that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because of import path [package:flutter_guidance_plugin/flutter_guidance_plugin.dart] that declares support for platforms: android, ios

Package does not support Flutter platform web

Because of import path [package:flutter_guidance_plugin/flutter_guidance_plugin.dart] that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because of import path [package:flutter_guidance_plugin/flutter_guidance_plugin.dart] that declares support for platforms: android, ios

Package not compatible with SDK dart

because of import path [flutter_guidance_plugin] that is in a package requiring null.

Health suggestions

Fix lib/src/guide_page.dart. (-1.99 points)

Analysis of lib/src/guide_page.dart reported 4 hints:

line 8 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: GuideSplashPage.pointX, GuideSplashPage.pointY, GuideSplashPage.tipsTextColor, GuideSplashPage.tipsBackgroundColor, GuideSplashPage.textTip, GuideSplashPage.tipsTextSize, GuideSplashPage.nextTextColor, GuideSplashPage.nextBackgroundColor, GuideSplashPage.nextTextTip, GuideSplashPage.nextTextSize, GuideSplashPage.isSlide, GuideSplashPage.isStore, GuideSplashPage.isSwiper, GuideSplashPage.globalKeyPointList, GuideSplashPage.curvePointList, GuideSplashPage.clickCallback

line 174 col 12: The value of the local variable 'padding' isn't used.

line 178 col 12: The value of the local variable 'height' isn't used.

line 182 col 12: The value of the local variable 'width' isn't used.

Fix lib/src/curve_painter.dart. (-1 points)

Analysis of lib/src/curve_painter.dart reported 2 hints:

line 1 col 8: Unused import: 'dart:async'.

line 2 col 8: Unused import: 'dart:math'.

Fix lib/src/exp_guilde_function.dart. (-0.50 points)

Analysis of lib/src/exp_guilde_function.dart reported 1 hint:

line 4 col 8: Unused import: 'curve_painter.dart'.

Format lib/flutter_guidance_plugin.dart.

Run flutter format to format lib/flutter_guidance_plugin.dart.

Format lib/src/guide_bean.dart.

Run flutter format to format lib/src/guide_bean.dart.

Maintenance issues and suggestions

The description contains too many non-ASCII characters. (-20 points)

The site uses English as its primary language. The value of the description field in your package's pubspec.yaml field should primarily contain characters used in English.

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test