Want to make opaque tutorial screen in flutter? As RoyalGriffin mentioned, you can use highlighter_coachmark library, and I am also aware of the error you are getting, the error is there because you are using RangeSlider class which is imported from 2 different packages.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import 'package:highlighter_coachmark/highlighter_coachmark.dart'; void main() => runApp(MaterialApp(home: HomePage())); class HomePage extends StatefulWidget { @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { GlobalKey _fabKey = GlobalObjectKey("fab"); // used by FAB GlobalKey _buttonKey = GlobalObjectKey("button"); // used by RaisedButton @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( key: _fabKey, // setting key onPressed: null, child: Icon(Icons.add), ), body: Center( child: RaisedButton( key: _buttonKey, // setting key onPressed: showFAB, child: Text("RaisedButton"), ), ), ); } // we trigger this method on RaisedButton click void showFAB() { CoachMark coachMarkFAB = CoachMark(); RenderBox target = _fabKey.currentContext.findRenderObject(); // you can change the shape of the mark Rect markRect = target.localToGlobal(Offset.zero) & target.size; markRect = Rect.fromCircle(center: markRect.center, radius: markRect.longestSide * 0.6); coachMarkFAB.show( targetContext: _fabKey.currentContext, markRect: markRect, children: [ Center( child: Text( "This is called\nFloatingActionButton", style: const TextStyle( fontSize: 24.0, fontStyle: FontStyle.italic, color: Colors.white, ), ), ) ], duration: null, // we don't want to dismiss this mark automatically so we are passing null // when this mark is closed, after 1s we show mark on RaisedButton onClose: () => Timer(Duration(seconds: 1), () => showButton()), ); } // this is triggered once first mark is dismissed void showButton() { CoachMark coachMarkTile = CoachMark(); RenderBox target = _buttonKey.currentContext.findRenderObject(); Rect markRect = target.localToGlobal(Offset.zero) & target.size; markRect = markRect.inflate(5.0); coachMarkTile.show( targetContext: _fabKey.currentContext, markRect: markRect, markShape: BoxShape.rectangle, children: [ Positioned( top: markRect.bottom + 15.0, right: 5.0, child: Text( "And this is a RaisedButton", style: const TextStyle( fontSize: 24.0, fontStyle: FontStyle.italic, color: Colors.white, ), ), ) ], duration: Duration(seconds: 5), // this effect will only last for 5s ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
