user guidance

User guidance is an easy way to use new function guidance.

Video

Installation

  1. 安装依赖

    dev_dependencies:
      user_guidcance: ^0.0.1
    
  2. 引入文件

    import 'package:user_guidcance/guidance_ui.dart';
    

Basic Example

List<GuidanceContextInfo> curvePointList = [];
GuidanceContextInfo contextModel = GuidanceContextInfo(
  title: '1. 新功能哦', 
  context: '大佬,这是一个新开发的功能哦,主要是为了让你方便的知道当前功能的使用方法,快速上手', 
  buttonText: '下一步', 
  rectType: GuidanceRectType.circle,  // 引导效果的样式,GuidanceRectType.circle、GuidanceRectType.rectangle
  ovalKey: secondKey, 
  elementKey: secondKey, 
  clipContext: context
);
curvePointList.add(contextModel);

UserGuidance(
  context,
  contextModels: curvePointList,
  colorShadow: AppColors.black,
  textSkip: "跳过",
  hideSkip: true,
  opacityShadow: 0.8, 
  onFinish: () => print('引导完成'),
  onClickTarget: (target) => {
    Future.delayed(Duration(seconds: 1), (){
      Navigator.of(context).pop();
    })
  },
  onClickSkip: () => print('点击跳过')
)..show();

Learn User Guidance

核心思想:根据元素的位置,利用动画展示新功能的信息。

  1. 元素的位置。

    不需要用户计算传递,根据元素的 GlobalKey 属性来计算元素的位置。

    RenderBox element = elementKey.currentContext.findRenderObject();
    Size size = element.size;
    Offset position = element.localToGlobal(Offset(0, 0));
    Rect rect = Rect.fromLTRB(position.dx, position.dy, position.dx + size.width, position.dy + size.height);
    
  2. 根据元素在屏幕上的位置决定对话框箭头的朝向。

  3. 根据 canvas 绘制对话框的样式。

    自定义的绘制类需要继承自 CustomPainter,重写 paint 方法,为了提高效率避免重复绘制,需要重写 shouldRepaint 方法。

    @override
    void paint(Canvas canvas, Size size) {
      canvas.saveLayer(Offset.zero & size, Paint());
      canvas.drawColor(colorShadow.withOpacity(opacityShadow), BlendMode.dstATop);
    
      var maxSize = size.width > size.height ? size.width : size.height;
      // 半径计算规则
      double radius = maxSize * (1 - progress) + sizeCircle;
    
      canvas.drawCircle(positioned, radius, _paintFocus);
      canvas.restore();
    }
    
    @override
    bool shouldRepaint(LightPainter oldDelegate) {
     return oldDelegate.progress != progress;
    }
    

Change Log

Change Log

License

click here

Libraries

custom_target_position
focus_light
guidance_index_notification
guidance_info
guidance_starter
guidance_starter_widget
guidance_view
guidanceui
guide_target
light_painter
light_rect_painter
target_focus
target_position
user_guidcance
util