From 82a30487c73c84aa4c88cc2f84a501e51aa45c5a Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Thu, 6 Jun 2019 16:43:32 +0530 Subject: [PATCH 01/12] Merge branch 'master' of /Users/bhavik.makwana/Documents/project/showcaseview with conflicts. --- .idea/encodings.xml | 4 ++++ .idea/misc.xml | 6 ++++++ 2 files changed, 10 insertions(+) create mode 100644 .idea/encodings.xml create mode 100644 .idea/misc.xml diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 00000000..15a15b21 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..5c94cb21 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file From 5dd4dc6097f1b9d589f2fb1f204031b88b1dfc72 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Mon, 17 Jun 2019 16:05:54 +0530 Subject: [PATCH 02/12] removed commented code, unnecessary decimal values and dart format. --- example/lib/main.dart | 252 +++++++++++++++++++++--------------------- 1 file changed, 123 insertions(+), 129 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 7f1411ea..76898017 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -12,7 +12,6 @@ class MyApp extends StatelessWidget { primarySwatch: Colors.blue, ), home: ShowCase(child: MailPage()), - ); } } @@ -32,6 +31,7 @@ class _MailPageState extends State { Widget build(BuildContext context) { WidgetsBinding.instance.addPostFrameCallback((_) => ShowCase.startShowCase(context, [_one, _two, _three, _four, _five])); + return Scaffold( body: Container( child: SafeArea( @@ -41,13 +41,13 @@ class _MailPageState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - padding: EdgeInsets.only(top: 8.0,left: 8.0,right: 8.0), + padding: EdgeInsets.only(top: 8, left: 8, right: 8), child: Card( shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10.0)), - elevation: 3.0, + borderRadius: BorderRadius.circular(10)), + elevation: 3, child: Container( - padding: EdgeInsets.all(12.0), + padding: EdgeInsets.all(12), child: Row( children: [ Expanded( @@ -64,12 +64,12 @@ class _MailPageState extends State { ), ), SizedBox( - width: 10.0, + width: 10, ), Text( 'Search email', style: TextStyle( - color: Colors.black45, fontSize: 20.0), + color: Colors.black45, fontSize: 20), ), ], ), @@ -80,13 +80,13 @@ class _MailPageState extends State { description: 'Click here to go to your Profile', shapeBorder: CircleBorder(), child: Container( - width: 30.0, - height: 30.0, - decoration: new BoxDecoration( + width: 30, + height: 30, + decoration: BoxDecoration( shape: BoxShape.circle, - image: new DecorationImage( + image: DecorationImage( fit: BoxFit.fill, - image: new AssetImage('assets/simform.png'), + image: AssetImage('assets/simform.png'), ), ), ), @@ -97,134 +97,124 @@ class _MailPageState extends State { ), ), SizedBox( - height: 7.0, + height: 7, ), Container( - padding: EdgeInsets.only(left: 13,top : 5), + padding: EdgeInsets.only(left: 13, top: 5), child: Text( 'PRIMARY', style: TextStyle( color: Colors.black54, - fontSize: 15.0, + fontSize: 15, fontWeight: FontWeight.bold), ), ), ], ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: TargetWidget( - key: _three, - title: 'Mail', - description: 'Click here to check mail', - child: Container( - padding: EdgeInsets.only(left : 6,right: 16), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - TargetWidget.withWidget( - key: _four, - cHeight: 80, - cWidht: 140, - shapeBorder: CircleBorder(), - showArrow: false, - container: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Container( - width: 40.0, - height: 40.0, - decoration: new BoxDecoration( - shape: BoxShape.circle, - color: Colors.blue[200]), - child: Center( - child: Text('S'), - ), - ), - SizedBox( - height: 10, - ), - Text( - 'Your sender\'s profile ', - style: TextStyle(color: Colors.white), - ) - ], - ), - child: Container( - margin: EdgeInsets.all(10.0), - child: Container( - width: 40.0, - height: 40.0, - decoration: new BoxDecoration( + key: _three, + title: 'Mail', + description: 'Click here to check mail', + child: Container( + padding: EdgeInsets.only(left: 6, right: 16), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TargetWidget.withWidget( + key: _four, + cHeight: 80, + cWidht: 140, + shapeBorder: CircleBorder(), + showArrow: false, + container: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 40, + height: 40, + decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.blue[200]), child: Center( child: Text('S'), ), ), - ), - ), - Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - 'Slack', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 17.0), - ), - Text( - 'Flutter Notification', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0), + SizedBox( + height: 10, ), Text( - 'Hi, you have new Notification', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15.0), + 'Your sender\'s profile ', + style: TextStyle(color: Colors.white), ) ], - ) - ], - ), - ), - Column( - children: [ - Text( - '1 Jun', - style: TextStyle( - fontWeight: FontWeight.bold, + ), + child: Container( + margin: EdgeInsets.all(10), + child: Container( + width: 40, + height: 40, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Colors.blue[200]), + child: Center( + child: Text('S'), + ), + ), ), ), - Icon( - Icons.star_border, - color: Colors.grey, + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Slack', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 17), + ), + Text( + 'Flutter Notification', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16), + ), + Text( + 'Hi, you have new Notification', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15), + ) + ], ) ], - ) - ], - ), - ) - // MailTile( - // Mail( - // sender: 'Slack', - // sub: 'Flutter Notification', - // msg: 'Hi, you have new Notification', - // date: '1 Jun', - // isUnread: true), - // ), + ), + ), + Column( + children: [ + Text( + '1 Jun', + style: TextStyle( + fontWeight: FontWeight.bold, + ), + ), + Icon( + Icons.star_border, + color: Colors.grey, + ) + ], + ) + ], ), + ), + ), ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( sender: 'Medium', @@ -235,7 +225,7 @@ class _MailPageState extends State { ), ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( sender: 'Quora', @@ -246,7 +236,7 @@ class _MailPageState extends State { ), ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( sender: 'Google', @@ -257,7 +247,7 @@ class _MailPageState extends State { ), ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( sender: 'Simfom', @@ -268,7 +258,7 @@ class _MailPageState extends State { ), ), Container( - padding: EdgeInsets.symmetric(vertical: 10.0), + padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( sender: 'Flutter', @@ -319,7 +309,7 @@ class MailTile extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - padding: EdgeInsets.only(left : 6.0,right: 16.0), + padding: EdgeInsets.only(left: 6, right: 16), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -328,10 +318,10 @@ class MailTile extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - margin: EdgeInsets.all(10.0), - width: 40.0, - height: 40.0, - decoration: new BoxDecoration( + margin: EdgeInsets.all(10), + width: 40, + height: 40, + decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.blue[200]), child: Center( child: Text(mail.sender[0]), @@ -343,23 +333,26 @@ class MailTile extends StatelessWidget { Text( mail.sender, style: TextStyle( - fontWeight: - mail.isUnread ? FontWeight.bold : FontWeight.normal, - fontSize: 17.0), + fontWeight: mail.isUnread + ? FontWeight.bold + : FontWeight.normal, + fontSize: 17), ), Text( mail.sub, style: TextStyle( - fontWeight: - mail.isUnread ? FontWeight.bold : FontWeight.normal, - fontSize: 16.0), + fontWeight: mail.isUnread + ? FontWeight.bold + : FontWeight.normal, + fontSize: 16), ), Text( mail.msg, style: TextStyle( - fontWeight: - mail.isUnread ? FontWeight.bold : FontWeight.normal, - fontSize: 15.0), + fontWeight: mail.isUnread + ? FontWeight.bold + : FontWeight.normal, + fontSize: 15), ) ], ) @@ -371,7 +364,8 @@ class MailTile extends StatelessWidget { Text( mail.date, style: TextStyle( - fontWeight: mail.isUnread ? FontWeight.bold : FontWeight.normal, + fontWeight: + mail.isUnread ? FontWeight.bold : FontWeight.normal, ), ), Icon( From d2a80c948cfbfeb4a9f2934d6a0de8deeebddf02 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Mon, 17 Jun 2019 17:11:17 +0530 Subject: [PATCH 03/12] dart style code format --- example/lib/main.dart | 448 ++++++++++++++++++++++-------------------- 1 file changed, 232 insertions(+), 216 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 76898017..dad2c8b0 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -29,247 +29,254 @@ class _MailPageState extends State { GlobalKey _five = GlobalKey(); @override Widget build(BuildContext context) { + //Start showcase view after current widget frames are drawn. WidgetsBinding.instance.addPostFrameCallback((_) => ShowCase.startShowCase(context, [_one, _two, _three, _four, _five])); return Scaffold( - body: Container( - child: SafeArea( - child: ListView( - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - padding: EdgeInsets.only(top: 8, left: 8, right: 8), - child: Card( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10)), - elevation: 3, - child: Container( - padding: EdgeInsets.all(12), - child: Row( - children: [ - Expanded( - child: Row( - children: [ - TargetWidget( - key: _one, - title: 'Menu', - description: - 'Click here to see menu options', - child: Icon( - Icons.menu, - color: Colors.black45, - ), - ), - SizedBox( - width: 10, + body: SafeArea( + child: ListView( + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + padding: EdgeInsets.only(top: 8, left: 8, right: 8), + child: Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + ), + elevation: 3, + child: Container( + padding: EdgeInsets.all(12), + child: Row( + children: [ + Expanded( + child: Row( + children: [ + TargetWidget( + key: _one, + title: 'Menu', + description: 'Click here to see menu options', + child: Icon( + Icons.menu, + color: Colors.black45, ), - Text( - 'Search email', - style: TextStyle( - color: Colors.black45, fontSize: 20), + ), + SizedBox( + width: 10, + ), + Text( + 'Search email', + style: TextStyle( + color: Colors.black45, + fontSize: 20, ), - ], - ), + ), + ], ), - TargetWidget( - key: _two, - title: 'Profile', - description: 'Click here to go to your Profile', - shapeBorder: CircleBorder(), - child: Container( - width: 30, - height: 30, - decoration: BoxDecoration( - shape: BoxShape.circle, - image: DecorationImage( - fit: BoxFit.fill, - image: AssetImage('assets/simform.png'), - ), + ), + TargetWidget( + key: _two, + title: 'Profile', + description: 'Click here to go to your Profile', + shapeBorder: CircleBorder(), + child: Container( + width: 30, + height: 30, + decoration: BoxDecoration( + shape: BoxShape.circle, + image: DecorationImage( + fit: BoxFit.fill, + image: AssetImage('assets/simform.png'), ), ), ), - ], - ), + ), + ], ), ), ), - SizedBox( - height: 7, - ), - Container( - padding: EdgeInsets.only(left: 13, top: 5), - child: Text( - 'PRIMARY', - style: TextStyle( - color: Colors.black54, - fontSize: 15, - fontWeight: FontWeight.bold), + ), + SizedBox( + height: 7, + ), + Container( + padding: EdgeInsets.only(left: 16, top: 4), + child: Text( + 'PRIMARY', + style: TextStyle( + color: Colors.black54, + fontSize: 15, + fontWeight: FontWeight.bold, ), ), - ], - ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: TargetWidget( - key: _three, - title: 'Mail', - description: 'Click here to check mail', - child: Container( - padding: EdgeInsets.only(left: 6, right: 16), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - TargetWidget.withWidget( - key: _four, - cHeight: 80, - cWidht: 140, - shapeBorder: CircleBorder(), - showArrow: false, - container: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - width: 40, - height: 40, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.blue[200]), - child: Center( - child: Text('S'), - ), - ), - SizedBox( - height: 10, - ), - Text( - 'Your sender\'s profile ', - style: TextStyle(color: Colors.white), - ) - ], - ), - child: Container( - margin: EdgeInsets.all(10), - child: Container( + ), + ], + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: TargetWidget( + key: _three, + title: 'Mail', + description: 'Click here to check mail', + child: Container( + padding: EdgeInsets.only(left: 6, right: 16), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TargetWidget.withWidget( + key: _four, + cHeight: 80, + cWidht: 140, + shapeBorder: CircleBorder(), + showArrow: false, + container: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( width: 40, height: 40, decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.blue[200]), + shape: BoxShape.circle, + color: Colors.blue[200], + ), child: Center( child: Text('S'), ), ), - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'Slack', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 17), - ), - Text( - 'Flutter Notification', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16), + SizedBox( + height: 10, ), Text( - 'Hi, you have new Notification', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15), + 'Your sender\'s profile ', + style: TextStyle(color: Colors.white), ) ], - ) - ], - ), - ), - Column( - children: [ - Text( - '1 Jun', - style: TextStyle( - fontWeight: FontWeight.bold, + ), + child: Container( + margin: EdgeInsets.all(10), + child: Container( + width: 40, + height: 40, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Colors.blue[200], + ), + child: Center( + child: Text('S'), + ), + ), ), ), - Icon( - Icons.star_border, - color: Colors.grey, + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Slack', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 17), + ), + Text( + 'Flutter Notification', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16), + ), + Text( + 'Hi, you have new Notification', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 15), + ) + ], ) ], - ) - ], - ), + ), + ), + Column( + children: [ + Text( + '1 Jun', + style: TextStyle( + fontWeight: FontWeight.bold, + ), + ), + Icon( + Icons.star_border, + color: Colors.grey, + ) + ], + ) + ], ), ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Medium', - sub: 'Showcase View', - msg: 'Check new showcase View', - date: '25 May', - isUnread: false), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: MailTile( + Mail( + sender: 'Medium', + sub: 'Showcase View', + msg: 'Check new showcase View', + date: '25 May', + isUnread: false, ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Quora', - sub: 'New Question for you', - msg: 'Hi, There is new question for you', - date: '22 May', - isUnread: false), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: MailTile( + Mail( + sender: 'Quora', + sub: 'New Question for you', + msg: 'Hi, There is new question for you', + date: '22 May', + isUnread: false, ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Google', - sub: 'Flutter 1.5', - msg: 'We have launched Flutter 1.5', - date: '20 May', - isUnread: true), - ), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: MailTile( + Mail( + sender: 'Google', + sub: 'Flutter 1.5', + msg: 'We have launched Flutter 1.5', + date: '20 May', + isUnread: true), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Simfom', - sub: 'Credit card Plugin', - msg: 'Check out our credit card plugin', - date: '19 May', - isUnread: true), - ), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: MailTile( + Mail( + sender: 'Simfom', + sub: 'Credit card Plugin', + msg: 'Check out our credit card plugin', + date: '19 May', + isUnread: true), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Flutter', - sub: 'Flutter is Future', - msg: 'Flutter laucnhed for Web', - date: '18 Jun', - isUnread: true), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 10), + child: MailTile( + Mail( + sender: 'Flutter', + sub: 'Flutter is Future', + msg: 'Flutter laucnhed for Web', + date: '18 Jun', + isUnread: true, ), ), - ], - ), + ), + ], ), ), floatingActionButton: TargetWidget( @@ -298,7 +305,14 @@ class Mail { String msg; String date; bool isUnread; - Mail({this.sender, this.sub, this.msg, this.date, this.isUnread}); + + Mail({ + this.sender, + this.sub, + this.msg, + this.date, + this.isUnread, + }); } class MailTile extends StatelessWidget { @@ -322,7 +336,9 @@ class MailTile extends StatelessWidget { width: 40, height: 40, decoration: BoxDecoration( - shape: BoxShape.circle, color: Colors.blue[200]), + shape: BoxShape.circle, + color: Colors.blue[200], + ), child: Center( child: Text(mail.sender[0]), ), @@ -333,27 +349,27 @@ class MailTile extends StatelessWidget { Text( mail.sender, style: TextStyle( - fontWeight: mail.isUnread - ? FontWeight.bold - : FontWeight.normal, - fontSize: 17), + fontWeight: + mail.isUnread ? FontWeight.bold : FontWeight.normal, + fontSize: 17, + ), ), Text( mail.sub, style: TextStyle( - fontWeight: mail.isUnread - ? FontWeight.bold - : FontWeight.normal, - fontSize: 16), + fontWeight: + mail.isUnread ? FontWeight.bold : FontWeight.normal, + fontSize: 16, + ), ), Text( mail.msg, style: TextStyle( - fontWeight: mail.isUnread - ? FontWeight.bold - : FontWeight.normal, - fontSize: 15), - ) + fontWeight: + mail.isUnread ? FontWeight.bold : FontWeight.normal, + fontSize: 15, + ), + ), ], ) ], @@ -371,7 +387,7 @@ class MailTile extends StatelessWidget { Icon( Icons.star_border, color: Colors.grey, - ) + ), ], ) ], From 490086daf742f016aaff6a5e22921d69a77d8853 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Mon, 17 Jun 2019 17:18:09 +0530 Subject: [PATCH 04/12] typo fix, test ui file removed --- example/lib/main.dart | 2 +- example/lib/test_UI.dart | 110 --------------------------------------- 2 files changed, 1 insertion(+), 111 deletions(-) delete mode 100644 example/lib/test_UI.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index dad2c8b0..9bd4ff33 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -257,7 +257,7 @@ class _MailPageState extends State { padding: EdgeInsets.symmetric(vertical: 10), child: MailTile( Mail( - sender: 'Simfom', + sender: 'simform', sub: 'Credit card Plugin', msg: 'Check out our credit card plugin', date: '19 May', diff --git a/example/lib/test_UI.dart b/example/lib/test_UI.dart deleted file mode 100644 index fa271131..00000000 --- a/example/lib/test_UI.dart +++ /dev/null @@ -1,110 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:showcaseview/showcaseview.dart'; - -class MyHomePage extends StatefulWidget { - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - int _counter = 0; - - GlobalKey _one = GlobalKey(); - GlobalKey _two = GlobalKey(); - GlobalKey _three = GlobalKey(); - GlobalKey _four = GlobalKey(); - - void _incrementCounter() { - setState(() { - _counter++; - }); - } - - @override - Widget build(BuildContext context) { - WidgetsBinding.instance.addPostFrameCallback((_) => - ShowCase.startShowCase(context, [_two, _one, _three, _four])); - - return Scaffold( - appBar: AppBar( - title: TargetWidget( - key: _one, - title: "Title", - description: "Hey There! I am title of the screen.", - child: Text('Showcase Animation'), - ), - ), - body: Container( - height: MediaQuery.of(context).size.height, - width: MediaQuery.of(context).size.width, - child: Stack( - children: [ - // Align( - // alignment: Alignment(-0.5, -0.3), - // child: TargetWidget( - // title: 'Sample Text', - // description: 'This is Sample Text', - // key: _five, - // container: Text( - // 'Helloooow', - // style: TextStyle( - // color: Colors.white, - // fontSize: 30, - // ), - // ), - // child: Text( - // 'Text', - // style: TextStyle(fontSize: 50), - // ), - // ), - // ), - Align( - alignment: Alignment(0.5, 0.6), - child: TargetWidget.withWidget( - cHeight: 200, - cWidht: 200, - key: _two, - container: Text( - 'Helloooow', - style: TextStyle( - color: Colors.white, - fontSize: 30, - ), - ), - // title: 'Title', - // description: 'Desc', - child: Text( - '$_counter', - style: Theme.of(context).textTheme.display1, - ), - ), - ), - Align( - alignment: Alignment.centerLeft, - child: TargetWidget( - overlayColor: Colors.black, - key: _four, - shapeBorder: CircleBorder(), - title: 'Title', - description: 'Temp Fab', - child: FloatingActionButton( - onPressed: () {}, - child: Icon(Icons.add), - )), - ), - ], - )), - floatingActionButton: TargetWidget( - key: _three, - title: "Tap Me!", - description: "Tap me and counter will increase.", - shapeBorder: CircleBorder(), - child: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', - child: Icon(Icons.add), - ), - ), - ); - } -} From 5f80241fab2f6cbe96b9b3a48c913d53e75a74b9 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Mon, 17 Jun 2019 17:48:19 +0530 Subject: [PATCH 05/12] - slide animation duration optional parameter in TargetWidget with default value, - dart style code format --- lib/custom_paint.dart | 21 ++++++++++++--------- lib/get_position.dart | 19 +++++++------------ lib/showcase.dart | 5 ++++- lib/target_widget.dart | 14 +++++++++----- 4 files changed, 32 insertions(+), 27 deletions(-) diff --git a/lib/custom_paint.dart b/lib/custom_paint.dart index 305f1af1..49b3775e 100644 --- a/lib/custom_paint.dart +++ b/lib/custom_paint.dart @@ -5,24 +5,27 @@ class ShapePainter extends CustomPainter { final ShapeBorder shapeBorder; final Color color; final double opacity; - ShapePainter( - {@required this.rect, this.color, this.shapeBorder, this.opacity}); + + ShapePainter({ + @required this.rect, + this.color, + this.shapeBorder, + this.opacity, + }); + @override void paint(Canvas canvas, Size size) { final paint = Paint(); - double radius = 3.0; paint.color = color.withOpacity(opacity); RRect outer = RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(0)); - if (shapeBorder == CircleBorder()) { - radius = 50; - } + + double radius = shapeBorder == CircleBorder() ? 50 : 3; + RRect inner = RRect.fromRectAndRadius(rect, Radius.circular(radius)); canvas.drawDRRect(outer, inner, paint); } @override - bool shouldRepaint(CustomPainter oldDelegate) { - return false; - } + bool shouldRepaint(CustomPainter oldDelegate) => false; } diff --git a/lib/get_position.dart b/lib/get_position.dart index 41349fe5..f9b95042 100644 --- a/lib/get_position.dart +++ b/lib/get_position.dart @@ -2,26 +2,21 @@ import 'package:flutter/material.dart'; class GetPosition { final GlobalKey key; + GetPosition({this.key}); Rect getRect() { RenderBox box = key.currentContext.findRenderObject(); + final topLeft = box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0))); final bottomRight = box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0))); - // double l = topLeft.dx; - // double t = topLeft.dy; - // double r = bottomRight.dx; - // double b = bottomRight.dy; - double space = 0 ; - // if (l == 0 || t == 0 || r == 0 || b == 0) { - // space = 0; - // } + Rect rect = Rect.fromLTRB( - topLeft.dx - space, - topLeft.dy - space, - bottomRight.dx + space, - bottomRight.dy + space, + topLeft.dx, + topLeft.dy, + bottomRight.dx, + bottomRight.dy, ); return rect; } diff --git a/lib/showcase.dart b/lib/showcase.dart index 42ed2efc..976f5675 100644 --- a/lib/showcase.dart +++ b/lib/showcase.dart @@ -3,7 +3,10 @@ import 'package:flutter/material.dart'; class ShowCase extends StatefulWidget { final Widget child; - const ShowCase({Key key, @required this.child}) : super(key: key); + const ShowCase({ + Key key, + @required this.child, + }) : super(key: key); static activeTargetWidget(BuildContext context) { return (context.inheritFromWidgetOfExactType(_InheritedShowCaseView) diff --git a/lib/target_widget.dart b/lib/target_widget.dart index c481aeeb..d4117f86 100644 --- a/lib/target_widget.dart +++ b/lib/target_widget.dart @@ -22,6 +22,7 @@ class TargetWidget extends StatefulWidget { final bool showArrow; final double cHeight; final double cWidht; + final Duration slideDuration; const TargetWidget({ this.key, @@ -38,7 +39,8 @@ class TargetWidget extends StatefulWidget { this.textColor, this.showArrow, this.cHeight, - this.cWidht + this.cWidht, + this.slideDuration = const Duration(milliseconds: 2000), }); const TargetWidget.withWidget({ @@ -55,8 +57,9 @@ class TargetWidget extends StatefulWidget { this.tooltipColor, this.textColor, this.showArrow, - @required this.cHeight, - @required this.cWidht + @required this.cHeight, + @required this.cWidht, + this.slideDuration = const Duration(milliseconds: 2000), }); @override @@ -78,7 +81,9 @@ class _TargetWidgetState extends State void initState() { super.initState(); _widthAnimationController = AnimationController( - duration: const Duration(milliseconds: 2000), vsync: this); + duration: widget.slideDuration, + vsync: this, + ); _widthAnimation = CurvedAnimation( parent: _widthAnimationController, @@ -213,7 +218,6 @@ class _TargetWidgetState extends State ); } - class _TargetWidget extends StatelessWidget { final Offset offset; final Size size; From 703bef7990cb9a8d5425501e58e5a14fec2c2e5f Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Mon, 17 Jun 2019 18:22:40 +0530 Subject: [PATCH 06/12] typo fixes, dart style code format --- example/lib/main.dart | 2 +- lib/target_widget.dart | 10 +++--- lib/tooltip_widget.dart | 77 ++++++++++++++++++++++------------------- 3 files changed, 47 insertions(+), 42 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 9bd4ff33..6cbc559b 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -132,7 +132,7 @@ class _MailPageState extends State { TargetWidget.withWidget( key: _four, cHeight: 80, - cWidht: 140, + cWidth: 140, shapeBorder: CircleBorder(), showArrow: false, container: Column( diff --git a/lib/target_widget.dart b/lib/target_widget.dart index d4117f86..307053e5 100644 --- a/lib/target_widget.dart +++ b/lib/target_widget.dart @@ -21,7 +21,7 @@ class TargetWidget extends StatefulWidget { final Color textColor; final bool showArrow; final double cHeight; - final double cWidht; + final double cWidth; final Duration slideDuration; const TargetWidget({ @@ -39,7 +39,7 @@ class TargetWidget extends StatefulWidget { this.textColor, this.showArrow, this.cHeight, - this.cWidht, + this.cWidth, this.slideDuration = const Duration(milliseconds: 2000), }); @@ -58,7 +58,7 @@ class TargetWidget extends StatefulWidget { this.textColor, this.showArrow, @required this.cHeight, - @required this.cWidht, + @required this.cWidth, this.slideDuration = const Duration(milliseconds: 2000), }); @@ -210,8 +210,8 @@ class _TargetWidgetState extends State tooltipColor: widget.tooltipColor ?? Colors.white, textColor: widget.textColor ?? Colors.black, showArrow: widget.showArrow ?? true, - cHeight: widget.cHeight, - cWidht: widget.cWidht, + contentHeight: widget.cHeight, + contentWidth: widget.cWidth, ), ], ), diff --git a/lib/tooltip_widget.dart b/lib/tooltip_widget.dart index 631588a6..18e78050 100644 --- a/lib/tooltip_widget.dart +++ b/lib/tooltip_widget.dart @@ -14,39 +14,40 @@ class Content extends StatelessWidget { final Color tooltipColor; final Color textColor; final bool showArrow; - final double cHeight; - final double cWidht; + final double contentHeight; + final double contentWidth; static bool isArrowUp; - Content( - {this.position, - this.offset, - this.screenSize, - this.title, - this.description, - this.animationOffset, - this.titleTextStyle, - this.descTextStyle, - this.container, - this.tooltipColor, - this.textColor, - this.showArrow, - this.cHeight, - this.cWidht}); + Content({ + this.position, + this.offset, + this.screenSize, + this.title, + this.description, + this.animationOffset, + this.titleTextStyle, + this.descTextStyle, + this.container, + this.tooltipColor, + this.textColor, + this.showArrow, + this.contentHeight, + this.contentWidth, + }); bool isCloseToTopOrBottom(Offset position) { double height = 120; - if (cHeight != null) { - height = cHeight; + if (contentHeight != null) { + height = contentHeight; } return (screenSize.height - position.dy) <= height; } String findPositionForContent(Offset position) { if (isCloseToTopOrBottom(position)) { - return 'A'; + return 'ABOVE'; } else { - return 'B'; + return 'BELOW'; } } @@ -66,8 +67,8 @@ class Content extends StatelessWidget { } bool _isRight() { - double screenWidht = screenSize.width / 3; - return ((screenWidht * 2) <= position.getCenter()); + double screenWidth = screenSize.width / 3; + return ((screenWidth * 2) <= position.getCenter()); } double _getLeft() { @@ -102,10 +103,10 @@ class Content extends StatelessWidget { } double _getSpace() { - double space = position.getCenter() - (cWidht / 2); - if (space + cWidht > screenSize.width) { - space = screenSize.width - cWidht - 8; - } else if (space < (cWidht / 2)) { + double space = position.getCenter() - (contentWidth / 2); + if (space + contentWidth > screenSize.width) { + space = screenSize.width - contentWidth - 8; + } else if (space < (contentWidth / 2)) { space = 16; } return space; @@ -114,19 +115,21 @@ class Content extends StatelessWidget { @override Widget build(BuildContext context) { final contentOrientation = findPositionForContent(offset); - final contentOffsetMultiplier = contentOrientation == "B" ? 1.0 : -1.0; + final contentOffsetMultiplier = contentOrientation == "BELOW" ? 1.0 : -1.0; isArrowUp = contentOffsetMultiplier == 1.0 ? true : false; + final contentY = isArrowUp ? position.getBottom() + (contentOffsetMultiplier * 3) : position.getTop() + (contentOffsetMultiplier * 3); + final contentFractionalOffset = contentOffsetMultiplier.clamp(-1.0, 0.0); - double padingTop = isArrowUp ? 22 : 0; - double padingBottom = isArrowUp ? 0 : 27; + double paddingTop = isArrowUp ? 22 : 0; + double paddingBottom = isArrowUp ? 0 : 27; if (!showArrow) { - padingTop = 10; - padingBottom = 10; + paddingTop = 10; + paddingBottom = 10; } if (container == null) { @@ -148,7 +151,7 @@ class Content extends StatelessWidget { color: Colors.transparent, child: Container( padding: - EdgeInsets.only(top: padingTop, bottom: padingBottom), + EdgeInsets.only(top: paddingTop, bottom: paddingBottom), child: ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Container( @@ -207,11 +210,13 @@ class Content extends StatelessWidget { child: Center( child: Container( padding: EdgeInsets.only( - top: padingTop, bottom: padingBottom), + top: paddingTop, + bottom: paddingBottom, + ), child: Container( color: Colors.transparent, - height: cHeight, - width: cWidht, + height: contentHeight, + width: contentWidth, child: Center( child: container, ), From fb025aecebb1b552e4ec1053a71f48088bb11829 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Tue, 18 Jun 2019 14:45:13 +0530 Subject: [PATCH 07/12] - arrow animation issue solved, - dart style code format --- lib/tooltip_widget.dart | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/tooltip_widget.dart b/lib/tooltip_widget.dart index 18e78050..4aa9e29a 100644 --- a/lib/tooltip_widget.dart +++ b/lib/tooltip_widget.dart @@ -153,7 +153,7 @@ class Content extends StatelessWidget { padding: EdgeInsets.only(top: paddingTop, bottom: paddingBottom), child: ClipRRect( - borderRadius: BorderRadius.circular(8.0), + borderRadius: BorderRadius.circular(8), child: Container( width: _getTooltipWidth(), padding: EdgeInsets.only( @@ -237,24 +237,24 @@ class Content extends StatelessWidget { final contentFractionalOffset = contentOffsetMultiplier.clamp(-1.0, 0.0); return Positioned( top: isArrowUp ? position.getBottom() : position.getTop(), - left: position.getCenter() - 25, + left: position.getCenter() - 24, child: FractionalTranslation( translation: Offset(0.0, contentFractionalOffset), child: SlideTransition( position: Tween( begin: Offset(0.0, contentFractionalOffset / 5), - end: Offset(0.0, 0.100), + end: Offset(0.0, 0.150), ).animate(animationOffset), child: isArrowUp ? Icon( Icons.arrow_drop_up, color: tooltipColor, - size: 50.0, + size: 50, ) : Icon( Icons.arrow_drop_down, color: tooltipColor, - size: 50.0, + size: 50, ), )), ); From 7921ea7303ecf62e7f7b4550766add5ba2480c4c Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Tue, 18 Jun 2019 15:09:50 +0530 Subject: [PATCH 08/12] default showArrow value false for TargetWidget.withWidget constructor --- example/lib/main.dart | 1 - lib/target_widget.dart | 10 +++++----- lib/tooltip_widget.dart | 37 +++++++++++++++++++------------------ 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 6cbc559b..a8256287 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -134,7 +134,6 @@ class _MailPageState extends State { cHeight: 80, cWidth: 140, shapeBorder: CircleBorder(), - showArrow: false, container: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/lib/target_widget.dart b/lib/target_widget.dart index 307053e5..ec9a4b9d 100644 --- a/lib/target_widget.dart +++ b/lib/target_widget.dart @@ -27,9 +27,9 @@ class TargetWidget extends StatefulWidget { const TargetWidget({ this.key, @required this.child, - this.container, @required this.title, @required this.description, + this.container, this.shapeBorder, this.overlayColor, this.overlayOpacity, @@ -47,6 +47,8 @@ class TargetWidget extends StatefulWidget { this.key, @required this.child, @required this.container, + @required this.cHeight, + @required this.cWidth, this.title, this.description, this.shapeBorder, @@ -56,9 +58,7 @@ class TargetWidget extends StatefulWidget { this.descTextStyle, this.tooltipColor, this.textColor, - this.showArrow, - @required this.cHeight, - @required this.cWidth, + this.showArrow = false, this.slideDuration = const Duration(milliseconds: 2000), }); @@ -95,7 +95,7 @@ class _TargetWidgetState extends State }); _slideAnimationController = AnimationController( - duration: const Duration(milliseconds: 2000), + duration: widget.slideDuration, vsync: this, )..addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { diff --git a/lib/tooltip_widget.dart b/lib/tooltip_widget.dart index 4aa9e29a..c635a934 100644 --- a/lib/tooltip_widget.dart +++ b/lib/tooltip_widget.dart @@ -239,24 +239,25 @@ class Content extends StatelessWidget { top: isArrowUp ? position.getBottom() : position.getTop(), left: position.getCenter() - 24, child: FractionalTranslation( - translation: Offset(0.0, contentFractionalOffset), - child: SlideTransition( - position: Tween( - begin: Offset(0.0, contentFractionalOffset / 5), - end: Offset(0.0, 0.150), - ).animate(animationOffset), - child: isArrowUp - ? Icon( - Icons.arrow_drop_up, - color: tooltipColor, - size: 50, - ) - : Icon( - Icons.arrow_drop_down, - color: tooltipColor, - size: 50, - ), - )), + translation: Offset(0.0, contentFractionalOffset), + child: SlideTransition( + position: Tween( + begin: Offset(0.0, contentFractionalOffset / 5), + end: Offset(0.0, 0.150), + ).animate(animationOffset), + child: isArrowUp + ? Icon( + Icons.arrow_drop_up, + color: tooltipColor, + size: 50, + ) + : Icon( + Icons.arrow_drop_down, + color: tooltipColor, + size: 50, + ), + ), + ), ); } } From 64732b5f6ad69d0b6e845d3dc835bbc3a8fd99be Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Tue, 18 Jun 2019 16:25:47 +0530 Subject: [PATCH 09/12] - code commenting, - optimization, - typo fixed - dart style code format --- example/lib/main.dart | 121 +++++++++++------------ lib/get_position.dart | 4 + lib/layout_overlays.dart | 172 +++++++++++++++++++++++++++++++++ lib/target_widget.dart | 201 +++------------------------------------ lib/tooltip_widget.dart | 4 +- 5 files changed, 247 insertions(+), 255 deletions(-) create mode 100644 lib/layout_overlays.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index a8256287..ba7d0ef1 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -27,6 +27,7 @@ class _MailPageState extends State { GlobalKey _three = GlobalKey(); GlobalKey _four = GlobalKey(); GlobalKey _five = GlobalKey(); + @override Widget build(BuildContext context) { //Start showcase view after current widget frames are drawn. @@ -41,14 +42,14 @@ class _MailPageState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - padding: EdgeInsets.only(top: 8, left: 8, right: 8), + padding: const EdgeInsets.only(top: 8, left: 8, right: 8), child: Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), elevation: 3, child: Container( - padding: EdgeInsets.all(12), + padding: const EdgeInsets.all(12), child: Row( children: [ Expanded( @@ -102,7 +103,7 @@ class _MailPageState extends State { height: 7, ), Container( - padding: EdgeInsets.only(left: 16, top: 4), + padding: const EdgeInsets.only(left: 16, top: 4), child: Text( 'PRIMARY', style: TextStyle( @@ -115,13 +116,13 @@ class _MailPageState extends State { ], ), Container( - padding: EdgeInsets.symmetric(vertical: 10), + padding: const EdgeInsets.symmetric(vertical: 10), child: TargetWidget( key: _three, title: 'Mail', description: 'Click here to check mail', child: Container( - padding: EdgeInsets.only(left: 6, right: 16), + padding: const EdgeInsets.only(left: 6, right: 16), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -158,7 +159,7 @@ class _MailPageState extends State { ], ), child: Container( - margin: EdgeInsets.all(10), + margin: const EdgeInsets.all(10), child: Container( width: 40, height: 40, @@ -178,21 +179,24 @@ class _MailPageState extends State { Text( 'Slack', style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 17), + fontWeight: FontWeight.bold, + fontSize: 17, + ), ), Text( 'Flutter Notification', style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16), + fontWeight: FontWeight.bold, + fontSize: 16, + ), ), Text( 'Hi, you have new Notification', style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 15), - ) + fontWeight: FontWeight.bold, + fontSize: 15, + ), + ), ], ) ], @@ -217,62 +221,47 @@ class _MailPageState extends State { ), ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Medium', - sub: 'Showcase View', - msg: 'Check new showcase View', - date: '25 May', - isUnread: false, - ), + MailTile( + Mail( + sender: 'Medium', + sub: 'Showcase View', + msg: 'Check new showcase View', + date: '25 May', + isUnread: false, ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Quora', - sub: 'New Question for you', - msg: 'Hi, There is new question for you', - date: '22 May', - isUnread: false, - ), + MailTile( + Mail( + sender: 'Quora', + sub: 'New Question for you', + msg: 'Hi, There is new question for you', + date: '22 May', + isUnread: false, ), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Google', - sub: 'Flutter 1.5', - msg: 'We have launched Flutter 1.5', - date: '20 May', - isUnread: true), - ), + MailTile( + Mail( + sender: 'Google', + sub: 'Flutter 1.5', + msg: 'We have launched Flutter 1.5', + date: '20 May', + isUnread: true), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'simform', - sub: 'Credit card Plugin', - msg: 'Check out our credit card plugin', - date: '19 May', - isUnread: true), - ), + MailTile( + Mail( + sender: 'simform', + sub: 'Credit card Plugin', + msg: 'Check out our credit card plugin', + date: '19 May', + isUnread: true), ), - Container( - padding: EdgeInsets.symmetric(vertical: 10), - child: MailTile( - Mail( - sender: 'Flutter', - sub: 'Flutter is Future', - msg: 'Flutter laucnhed for Web', - date: '18 Jun', - isUnread: true, - ), + MailTile( + Mail( + sender: 'Flutter', + sub: 'Flutter is Future', + msg: 'Flutter laucnhed for Web', + date: '18 Jun', + isUnread: true, ), ), ], @@ -322,7 +311,7 @@ class MailTile extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - padding: EdgeInsets.only(left: 6, right: 16), + padding: const EdgeInsets.only(left: 6, right: 16, top: 8), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -331,7 +320,7 @@ class MailTile extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - margin: EdgeInsets.all(10), + margin: const EdgeInsets.all(10), width: 40, height: 40, decoration: BoxDecoration( @@ -388,7 +377,7 @@ class MailTile extends StatelessWidget { color: Colors.grey, ), ], - ) + ), ], ), ); diff --git a/lib/get_position.dart b/lib/get_position.dart index f9b95042..42f0561c 100644 --- a/lib/get_position.dart +++ b/lib/get_position.dart @@ -21,6 +21,7 @@ class GetPosition { return rect; } + ///Get the bottom position of the widget double getBottom() { RenderBox box = key.currentContext.findRenderObject(); final bottomRight = @@ -28,18 +29,21 @@ class GetPosition { return bottomRight.dy; } + ///Get the top position of the widget double getTop() { RenderBox box = key.currentContext.findRenderObject(); final topLeft = box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0))); return topLeft.dy; } + ///Get the left position of the widget double getLeft() { RenderBox box = key.currentContext.findRenderObject(); final topLeft = box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0))); return topLeft.dx; } + ///Get the right position of the widget double getRight() { RenderBox box = key.currentContext.findRenderObject(); final bottomRight = diff --git a/lib/layout_overlays.dart b/lib/layout_overlays.dart new file mode 100644 index 00000000..49f0052e --- /dev/null +++ b/lib/layout_overlays.dart @@ -0,0 +1,172 @@ +import 'package:flutter/material.dart'; + +/// Displays an overlay Widget anchored directly above the center of this +/// [AnchoredOverlay]. +/// +/// The overlay Widget is created by invoking the provided [overlayBuilder]. +/// +/// The [anchor] position is provided to the [overlayBuilder], but the builder +/// does not have to respect it. In other words, the [overlayBuilder] can +/// interpret the meaning of "anchor" however it wants - the overlay will not +/// be forced to be centered about the [anchor]. +/// +/// The overlay built by this [AnchoredOverlay] can be conditionally shown +/// and hidden by settings the [showOverlay] property to true or false. +/// +/// The [overlayBuilder] is invoked every time this Widget is rebuilt. +/// +class AnchoredOverlay extends StatelessWidget { + final bool showOverlay; + final Widget Function(BuildContext, Rect anchorBounds, Offset anchor) + overlayBuilder; + final Widget child; + + AnchoredOverlay({ + key, + this.showOverlay = false, + this.overlayBuilder, + this.child, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return OverlayBuilder( + showOverlay: showOverlay, + overlayBuilder: (BuildContext overlayContext) { + // To calculate the "anchor" point we grab the render box of + // our parent Container and then we find the center of that box. + RenderBox box = context.findRenderObject() as RenderBox; + final topLeft = + box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0))); + final bottomRight = + box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0))); + final Rect anchorBounds = Rect.fromLTRB( + topLeft.dx, + topLeft.dy, + bottomRight.dx, + bottomRight.dy, + ); + final anchorCenter = box.size.center(topLeft); + return overlayBuilder(overlayContext, anchorBounds, anchorCenter); + }, + child: child, + ); + }, + ); + } +} + +// +// Displays an overlay Widget as constructed by the given [overlayBuilder]. +// +// The overlay built by the [overlayBuilder] can be conditionally shown and hidden by settings the [showOverlay] +// property to true or false. +// +// The [overlayBuilder] is invoked every time this Widget is rebuilt. +// +// Implementation note: the reason we rebuild the overlay every time our state changes is because there doesn't seem +// to be any better way to invalidate the overlay itself than to invalidate this Widget. +// Remember, overlay Widgets exist in [OverlayEntry]s which are inaccessible to outside Widgets. +// But if a better approach is found then feel free to use it. +// +class OverlayBuilder extends StatefulWidget { + final bool showOverlay; + final Widget Function(BuildContext) overlayBuilder; + final Widget child; + + OverlayBuilder({ + key, + this.showOverlay = false, + this.overlayBuilder, + this.child, + }) : super(key: key); + + @override + _OverlayBuilderState createState() => _OverlayBuilderState(); +} + +class _OverlayBuilderState extends State { + OverlayEntry _overlayEntry; + + @override + void initState() { + super.initState(); + + if (widget.showOverlay) { + WidgetsBinding.instance.addPostFrameCallback((_) => showOverlay()); + } + } + + @override + void didUpdateWidget(OverlayBuilder oldWidget) { + super.didUpdateWidget(oldWidget); + WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay()); + } + + @override + void reassemble() { + super.reassemble(); + WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay()); + } + + @override + void dispose() { + if (isShowingOverlay()) { + hideOverlay(); + } + + super.dispose(); + } + + bool isShowingOverlay() => _overlayEntry != null; + + void showOverlay() { + if (_overlayEntry == null) { + // Create the overlay. + _overlayEntry = OverlayEntry( + builder: widget.overlayBuilder, + ); + addToOverlay(_overlayEntry); + } else { + // Rebuild overlay. + buildOverlay(); + } + } + + void addToOverlay(OverlayEntry overlayEntry) async { + Overlay.of(context).insert(overlayEntry); + final overlay = Overlay.of(context); + if (overlayEntry == null) + WidgetsBinding.instance + .addPostFrameCallback((_) => overlay.insert(overlayEntry)); + } + + void hideOverlay() { + if (_overlayEntry != null) { + _overlayEntry.remove(); + _overlayEntry = null; + } + } + + void syncWidgetAndOverlay() { + if (isShowingOverlay() && !widget.showOverlay) { + hideOverlay(); + } else if (!isShowingOverlay() && widget.showOverlay) { + showOverlay(); + } + } + + void buildOverlay() async { + WidgetsBinding.instance + .addPostFrameCallback((_) => _overlayEntry?.markNeedsBuild()); + } + + @override + Widget build(BuildContext context) { + buildOverlay(); + + return widget.child; + } +} diff --git a/lib/target_widget.dart b/lib/target_widget.dart index ec9a4b9d..2d319328 100644 --- a/lib/target_widget.dart +++ b/lib/target_widget.dart @@ -5,6 +5,7 @@ import 'package:showcaseview/custom_paint.dart'; import 'package:showcaseview/tooltip_widget.dart'; import 'get_position.dart'; +import 'layout_overlays.dart'; class TargetWidget extends StatefulWidget { final Widget child; @@ -35,8 +36,8 @@ class TargetWidget extends StatefulWidget { this.overlayOpacity, this.titleTextStyle, this.descTextStyle, - this.tooltipColor, - this.textColor, + this.tooltipColor = Colors.white, + this.textColor = Colors.black, this.showArrow, this.cHeight, this.cWidth, @@ -56,8 +57,8 @@ class TargetWidget extends StatefulWidget { this.overlayOpacity, this.titleTextStyle, this.descTextStyle, - this.tooltipColor, - this.textColor, + this.tooltipColor = Colors.white, + this.textColor = Colors.black, this.showArrow = false, this.slideDuration = const Duration(milliseconds: 2000), }); @@ -70,29 +71,13 @@ class _TargetWidgetState extends State with TickerProviderStateMixin { bool _showShowCase = false; Animation _slideAnimation; - Animation _widthAnimation; - AnimationController _slideAnimationController; - AnimationController _widthAnimationController; GetPosition position; @override void initState() { super.initState(); - _widthAnimationController = AnimationController( - duration: widget.slideDuration, - vsync: this, - ); - - _widthAnimation = CurvedAnimation( - parent: _widthAnimationController, - curve: Curves.easeInOut, - ); - - _widthAnimationController.addListener(() { - setState(() {}); - }); _slideAnimationController = AnimationController( duration: widget.slideDuration, @@ -110,6 +95,7 @@ class _TargetWidgetState extends State parent: _slideAnimationController, curve: Curves.easeInOut, ); + position = GetPosition(key: widget.key); } @@ -117,7 +103,6 @@ class _TargetWidgetState extends State void dispose() { super.dispose(); _slideAnimationController.dispose(); - _widthAnimationController.dispose(); } @override @@ -126,6 +111,9 @@ class _TargetWidgetState extends State showOverlay(); } + /// + /// show overlay if there is any target widget + /// void showOverlay() { GlobalKey activeStep = ShowCase.activeTargetWidget(context); setState(() { @@ -134,7 +122,6 @@ class _TargetWidgetState extends State if (activeStep == widget.key) { _slideAnimationController.forward(); - _widthAnimationController.forward(); } } @@ -149,18 +136,9 @@ class _TargetWidgetState extends State ); } - // _onTargetTap() { - // ShowCase.dismiss(context); - // setState(() { - // _showShowCase = false; - // print(_showShowCase); - // }); - // } - _nextIfAny() { ShowCase.completed(context, widget.key); _slideAnimationController.forward(); - _widthAnimationController.forward(); } buildOverlayOnTarget( @@ -180,7 +158,6 @@ class _TargetWidgetState extends State child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, - // color: Colors.grey.withOpacity(0.3), child: CustomPaint( painter: ShapePainter( opacity: widget.overlayOpacity ?? 0.7, @@ -193,7 +170,6 @@ class _TargetWidgetState extends State _TargetWidget( offset: offset, size: size, - widthAnimation: _widthAnimation, onTap: _nextIfAny, shapeBorder: widget.shapeBorder, ), @@ -207,8 +183,8 @@ class _TargetWidgetState extends State titleTextStyle: widget.titleTextStyle, descTextStyle: widget.descTextStyle, container: widget.container, - tooltipColor: widget.tooltipColor ?? Colors.white, - textColor: widget.textColor ?? Colors.black, + tooltipColor: widget.tooltipColor, + textColor: widget.textColor, showArrow: widget.showArrow ?? true, contentHeight: widget.cHeight, contentWidth: widget.cWidth, @@ -240,19 +216,16 @@ class _TargetWidget extends StatelessWidget { top: offset.dy, left: offset.dx, child: FractionalTranslation( - translation: Offset(-0.5, -0.5), + translation: const Offset(-0.5, -0.5), child: GestureDetector( onTap: onTap, child: Container( height: size.height + 16, - width: Tween( - begin: 0, - end: size.width + 16, //controls the opening of the slice - ).animate(widthAnimation).value, + width: size.width + 16, decoration: ShapeDecoration( shape: shapeBorder ?? RoundedRectangleBorder( - borderRadius: BorderRadius.all( + borderRadius: const BorderRadius.all( Radius.circular(8), ), ), @@ -263,149 +236,3 @@ class _TargetWidget extends StatelessWidget { ); } } - -class AnchoredOverlay extends StatelessWidget { - final bool showOverlay; - final Widget Function(BuildContext, Rect anchorBounds, Offset anchor) - overlayBuilder; - final Widget child; - - AnchoredOverlay({ - key, - this.showOverlay = false, - this.overlayBuilder, - this.child, - }) : super(key: key); - - @override - Widget build(BuildContext context) { - return LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return OverlayBuilder( - showOverlay: showOverlay, - overlayBuilder: (BuildContext overlayContext) { - // To calculate the "anchor" point we grab the render box of - // our parent Container and then we find the center of that box. - RenderBox box = context.findRenderObject() as RenderBox; - final topLeft = - box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0))); - final bottomRight = - box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0))); - final Rect anchorBounds = Rect.fromLTRB( - topLeft.dx, - topLeft.dy, - bottomRight.dx, - bottomRight.dy, - ); - final anchorCenter = box.size.center(topLeft); - return overlayBuilder(overlayContext, anchorBounds, anchorCenter); - }, - child: child, - ); - }, - ); - } -} - -class OverlayBuilder extends StatefulWidget { - final bool showOverlay; - final Widget Function(BuildContext) overlayBuilder; - final Widget child; - - OverlayBuilder({ - key, - this.showOverlay = false, - this.overlayBuilder, - this.child, - }) : super(key: key); - - @override - _OverlayBuilderState createState() => _OverlayBuilderState(); -} - -class _OverlayBuilderState extends State { - OverlayEntry _overlayEntry; - - @override - void initState() { - super.initState(); - - if (widget.showOverlay) { - // showOverlay(); - WidgetsBinding.instance.addPostFrameCallback((_) => showOverlay()); - } - } - - @override - void didUpdateWidget(OverlayBuilder oldWidget) { - super.didUpdateWidget(oldWidget); - // syncWidgetAndOverlay(); - WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay()); - } - - @override - void reassemble() { - super.reassemble(); - // syncWidgetAndOverlay(); - WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay()); - } - - @override - void dispose() { - if (isShowingOverlay()) { - hideOverlay(); - } - - super.dispose(); - } - - bool isShowingOverlay() => _overlayEntry != null; - - void showOverlay() { - if (_overlayEntry == null) { - // Create the overlay. - _overlayEntry = OverlayEntry( - builder: widget.overlayBuilder, - ); - addToOverlay(_overlayEntry); - } else { - // Rebuild overlay. - buildOverlay(); - } - } - - void addToOverlay(OverlayEntry overlayEntry) async { - Overlay.of(context).insert(overlayEntry); - final overlay = Overlay.of(context); - if (overlayEntry == null) - WidgetsBinding.instance - .addPostFrameCallback((_) => overlay.insert(overlayEntry)); - } - - void hideOverlay() { - if (_overlayEntry != null) { - _overlayEntry.remove(); - _overlayEntry = null; - } - } - - void syncWidgetAndOverlay() { - if (isShowingOverlay() && !widget.showOverlay) { - hideOverlay(); - } else if (!isShowingOverlay() && widget.showOverlay) { - showOverlay(); - } - } - - void buildOverlay() async { - WidgetsBinding.instance - .addPostFrameCallback((_) => _overlayEntry?.markNeedsBuild()); - } - - @override - Widget build(BuildContext context) { - buildOverlay(); - - return widget.child; - } -} diff --git a/lib/tooltip_widget.dart b/lib/tooltip_widget.dart index c635a934..c25fed61 100644 --- a/lib/tooltip_widget.dart +++ b/lib/tooltip_widget.dart @@ -62,8 +62,8 @@ class Content extends StatelessWidget { } bool _isLeft() { - double screenWidht = screenSize.width / 3; - return !(screenWidht <= position.getCenter()); + double screenWidth = screenSize.width / 3; + return !(screenWidth <= position.getCenter()); } bool _isRight() { From 12d71eca6c7fac65b4ba44e2a3a1cf4c02f150d5 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Wed, 19 Jun 2019 10:35:58 +0530 Subject: [PATCH 10/12] updated pubspec --- example/pubspec.lock | 14 +++++++------- pubspec.yaml | 9 +++++---- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/example/pubspec.lock b/example/pubspec.lock index 1f9727d2..872a2131 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -1,5 +1,5 @@ # Generated by pub -# See https://www.dartlang.org/tools/pub/glossary#lockfile +# See https://dart.dev/tools/pub/glossary#lockfile packages: async: dependency: transitive @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.1.0" + version: "2.2.0" boolean_selector: dependency: transitive description: @@ -73,21 +73,21 @@ packages: name: pedantic url: "https://pub.dartlang.org" source: hosted - version: "1.5.0" + version: "1.7.0" quiver: dependency: transitive description: name: quiver url: "https://pub.dartlang.org" source: hosted - version: "2.0.2" + version: "2.0.3" showcaseview: dependency: "direct main" description: path: ".." relative: true source: path - version: "0.0.1" + version: "0.1.0" sky_engine: dependency: transitive description: flutter @@ -134,7 +134,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.2.4" + version: "0.2.5" typed_data: dependency: transitive description: @@ -150,4 +150,4 @@ packages: source: hosted version: "2.0.8" sdks: - dart: ">=2.2.0 <3.0.0" + dart: ">=2.2.2 <3.0.0" diff --git a/pubspec.yaml b/pubspec.yaml index b2f4c45b..44c5f3e4 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,8 +1,9 @@ name: showcaseview -description: A new Flutter package. -version: 0.0.1 -author: -homepage: +description: A Flutter package to Showcase/Highlight widgets step by step. +version: 0.1.0 +author: Simform solutions +homepage: https://github.com/simformsolutions/flutter_showcaseview +issue_tracker: https://github.com/simformsolutions/flutter_showcaseview/issues environment: sdk: ">=2.1.0 <3.0.0" From e6778327a07b4eb0a6e055f8e69191b98e6df885 Mon Sep 17 00:00:00 2001 From: Bhavik Makwana Date: Wed, 19 Jun 2019 10:57:16 +0530 Subject: [PATCH 11/12] updated gitignore --- .gitignore | 6 +- .idea/codeStyles/Project.xml | 29 ---- .idea/encodings.xml | 4 - .idea/libraries/Dart_Packages.xml | 180 ---------------------- .idea/libraries/Dart_SDK.xml | 28 ---- .idea/libraries/Flutter_Plugins.xml | 7 - .idea/misc.xml | 6 - .idea/modules.xml | 8 - .idea/showcaseview.iml | 19 --- .idea/vcs.xml | 6 - .idea/workspace.xml | 230 ---------------------------- .vscode/launch.json | 14 -- 12 files changed, 1 insertion(+), 536 deletions(-) delete mode 100644 .idea/codeStyles/Project.xml delete mode 100644 .idea/encodings.xml delete mode 100644 .idea/libraries/Dart_Packages.xml delete mode 100644 .idea/libraries/Dart_SDK.xml delete mode 100644 .idea/libraries/Flutter_Plugins.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/showcaseview.iml delete mode 100644 .idea/vcs.xml delete mode 100644 .idea/workspace.xml delete mode 100644 .vscode/launch.json diff --git a/.gitignore b/.gitignore index 1406e523..f1f9930e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,3 @@ - -# Created by https://www.gitignore.io/api/flutter -# Edit at https://www.gitignore.io/?templates=flutter - ### Flutter ### # Flutter/Dart/Pub related **/doc/api/ @@ -56,4 +52,4 @@ build/ !**/ios/**/default.perspectivev3 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages -# End of https://www.gitignore.io/api/flutter \ No newline at end of file +/showcaseview.iml diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml deleted file mode 100644 index 30aa626c..00000000 --- a/.idea/codeStyles/Project.xml +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml deleted file mode 100644 index 15a15b21..00000000 --- a/.idea/encodings.xml +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/libraries/Dart_Packages.xml b/.idea/libraries/Dart_Packages.xml deleted file mode 100644 index 8ff1ec09..00000000 --- a/.idea/libraries/Dart_Packages.xml +++ /dev/null @@ -1,180 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Dart_SDK.xml b/.idea/libraries/Dart_SDK.xml deleted file mode 100644 index 824a5c2e..00000000 --- a/.idea/libraries/Dart_SDK.xml +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/libraries/Flutter_Plugins.xml b/.idea/libraries/Flutter_Plugins.xml deleted file mode 100644 index b0f69711..00000000 --- a/.idea/libraries/Flutter_Plugins.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 5c94cb21..00000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 36188300..00000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/showcaseview.iml b/.idea/showcaseview.iml deleted file mode 100644 index ef03246b..00000000 --- a/.idea/showcaseview.iml +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddf..00000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 54645fdb..00000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,230 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - withOpacity - Target - Rect - Offset - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -