show guide support

BakerJQ · Oct 14, 2020 · a297865 · a297865
1 parent a3de7a1
commit a297865
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 83 deletions.
diff --git a/example/lib/drop_down_menu.dart b/example/lib/drop_down_menu.dart
@@ -2,7 +2,7 @@ import 'package:easy_popup/easy_popup.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
-class DropDownMenu extends StatefulWidget with PopupChild {
+class DropDownMenu extends StatefulWidget with EasyPopupChild {
   final _PopController controller = _PopController();
 
   @override

diff --git a/example/lib/guide_popup.dart b/example/lib/guide_popup.dart
@@ -0,0 +1,104 @@
+import 'package:easy_popup/easy_popup.dart';
+import 'package:flutter/material.dart';
+
+class GuidePopup extends StatefulWidget with EasyPopupChild {
+  final List<GlobalKey> highlightKeys;
+
+  GuidePopup(this.highlightKeys);
+
+  @override
+  _GuidePopupState createState() => _GuidePopupState();
+
+  @override
+  dismiss() {}
+}
+
+class _GuidePopupState extends State<GuidePopup> {
+  int highlightIndex = -1;
+  double hLeft, hTop, hWidth, hHeight, hRadius;
+
+  @override
+  void initState() {
+    super.initState();
+    Rect rect = _calculateNextGuide();
+    hRadius = 10;
+    hLeft = rect.left;
+    hTop = rect.top;
+    hHeight = rect.height;
+    hWidth = rect.width;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () => _next(),
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        body: Container(
+          padding: EdgeInsets.only(
+            top: hTop - 55,
+            left: hLeft + (hWidth - 300) / 2,
+          ),
+          child: Container(
+              width: 300,
+              height: 50,
+              alignment: Alignment.center,
+              color: Colors.white,
+              child: Text('${_getShowText()}')),
+        ),
+      ),
+    );
+  }
+
+  String _getShowText() {
+    switch (highlightIndex) {
+      case 0:
+        return 'Click here to show dropdown menu.';
+      case 1:
+        return 'Click here to show guide.';
+    }
+    return '';
+  }
+
+  _next() {
+    Rect rect = _calculateNextGuide();
+    if (rect == null) {
+      return;
+    }
+    List<RRect> highlights = [
+      RRect.fromRectAndRadius(
+        rect,
+        Radius.circular(hRadius),
+      ),
+    ];
+    setState(() {
+      EasyPopup.setHighlights(context, highlights);
+      hLeft = rect.left;
+      hTop = rect.top;
+      hHeight = rect.height;
+      hWidth = rect.width;
+    });
+  }
+
+  Rect _calculateNextGuide() {
+    highlightIndex++;
+    if (highlightIndex >= widget.highlightKeys.length) {
+      _dismiss();
+      return null;
+    }
+    RenderBox box =
+        widget.highlightKeys[highlightIndex].currentContext.findRenderObject();
+    Offset offset = box.localToGlobal(Offset.zero);
+    return Rect.fromLTWH(
+      offset.dx - 5,
+      offset.dy - 5,
+      box.size.width + 10,
+      box.size.height + 10,
+    );
+  }
+
+  _dismiss() {
+    EasyPopup.pop(context);
+  }
+}
diff --git a/example/lib/highlight_popup.dart b/example/lib/highlight_popup.dart
diff --git a/example/lib/home_page.dart b/example/lib/home_page.dart
@@ -2,15 +2,15 @@ import 'package:easy_popup/easy_popup.dart';
 import 'package:flutter/material.dart';
 
 import 'drop_down_menu.dart';
-import 'highlight_popup.dart';
+import 'guide_popup.dart';
 
 class Home extends StatefulWidget {
   @override
   _HomeState createState() => _HomeState();
 }
 
 class _HomeState extends State<Home> {
-  GlobalKey key = new GlobalKey();
+  GlobalKey key1 = new GlobalKey(), key2 = new GlobalKey();
 
   @override
   Widget build(BuildContext context) {
@@ -24,9 +24,10 @@ class _HomeState extends State<Home> {
       backgroundColor: Colors.white,
       body: Center(
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
             GestureDetector(
+              key: key1,
               behavior: HitTestBehavior.opaque,
               onTap: _showDropDownMenu,
               child: Container(
@@ -41,20 +42,17 @@ class _HomeState extends State<Home> {
               ),
             ),
             GestureDetector(
-              key: key,
+              key: key2,
               behavior: HitTestBehavior.opaque,
               onTap: _showGuidePopup,
-              child: Padding(
-                padding: EdgeInsets.all(5),
-                child: Container(
-                  width: 200,
-                  height: 50,
-                  color: Colors.blueAccent,
-                  alignment: Alignment.center,
-                  child: Text(
-                    'ShowHighLightPopup',
-                    style: TextStyle(color: Colors.white),
-                  ),
+              child: Container(
+                width: 200,
+                height: 50,
+                color: Colors.blueAccent,
+                alignment: Alignment.center,
+                child: Text(
+                  'ShowHighLightPopup',
+                  style: TextStyle(color: Colors.white),
                 ),
               ),
             ),
@@ -70,6 +68,24 @@ class _HomeState extends State<Home> {
   }
 
   _showGuidePopup() {
-    EasyPopup.show(context, HighLightPopup(key), highlightWidgetKey: key);
+    RenderBox box = key1.currentContext.findRenderObject();
+    Offset offset = box.localToGlobal(Offset.zero);
+    double left = offset.dx - 5;
+    double top = offset.dy - 5;
+    double width = box.size.width + 10;
+    double height = box.size.height + 10;
+    List<RRect> highlights = [
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, width, height),
+        Radius.circular(10),
+      ),
+    ];
+    EasyPopup.show(
+      context,
+      GuidePopup([key1, key2]),
+      cancelable: false,
+      highlights: highlights,
+      duration: Duration(milliseconds: 100),
+    );
   }
 }
diff --git a/lib/easy_popup.dart b/lib/easy_popup.dart
@@ -1,2 +1,2 @@
 export 'src/easy_popup.dart';
-export 'src/popup_child.dart';
+export 'src/easy_popup_child.dart';
diff --git a/lib/src/easy_popup.dart b/lib/src/easy_popup.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
+import 'easy_popup_child.dart';
 import 'easy_popup_route.dart';
-import 'popup_child.dart';
 
 class EasyPopup {
   static pop(BuildContext context) {
@@ -10,13 +10,13 @@ class EasyPopup {
 
   static show(
     BuildContext context,
-    PopupChild child, {
+    EasyPopupChild child, {
     Offset offsetLT,
     Offset offsetRB,
     bool cancelable = true,
     bool darkEnable = true,
     Duration duration = const Duration(milliseconds: 300),
-    GlobalKey highlightWidgetKey,
+    List<RRect> highlights,
   }) {
     Navigator.of(context).push(
       EasyPopupRoute(
@@ -26,8 +26,12 @@ class EasyPopup {
         cancelable: cancelable,
         darkEnable: darkEnable,
         duration: duration,
-        highlightWidgetKey: highlightWidgetKey,
+        highlights: highlights,
       ),
     );
   }
+
+  static setHighlights(BuildContext context, List<RRect> highlights) {
+    EasyPopupRoute.setHighlights(context, highlights);
+  }
 }
diff --git a/lib/src/popup_child.dart → lib/src/easy_popup_child.dart b/lib/src/popup_child.dart → lib/src/easy_popup_child.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
 
-mixin PopupChild implements Widget {
+mixin EasyPopupChild implements Widget {
   dismiss();
 }