Created
February 16, 2021 07:36
-
-
Save ShaiqAhmedkhan/24e389b7b9fe797496eb3ac1f117d332 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart'; | |
class MyHomePage extends StatefulWidget { | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
TutorialCoachMark tutorialCoachMark; | |
List<TargetFocus> targets = List(); | |
GlobalKey key = GlobalKey(); | |
GlobalKey _key1 = GlobalKey(); | |
GlobalKey _key2 = GlobalKey(); | |
GlobalKey _key3 = GlobalKey(); | |
@override | |
void initState() { | |
initTargets(); | |
WidgetsBinding.instance.addPostFrameCallback(_layout); | |
super.initState(); | |
} | |
void _layout(_){ | |
Future.delayed(Duration(milliseconds: 100)); | |
showTutorial(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
backgroundColor: Colors.grey[200], | |
appBar: AppBar( | |
backgroundColor: Colors.black, | |
title: Text("Tutorial Coach Mark Demo"), | |
leading: Icon(Icons.menu), | |
key: _key1, | |
), | |
body: Container( | |
color: Colors.white, | |
child: Stack( | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.only(top: 170.0), | |
child: InkWell( | |
onTap: () { | |
showTutorial(); | |
}, | |
child: Align( | |
alignment: Alignment.topCenter, | |
child: Container( | |
key: key, | |
color: Colors.orange[100], | |
height: 100, | |
width: MediaQuery.of(context).size.width - 50, | |
child: Align( | |
alignment: Alignment.center, | |
child: Image.asset( | |
"assets/powered_by.png", | |
), | |
), | |
), | |
), | |
), | |
), | |
Align( | |
alignment: Alignment.center, | |
child: SizedBox( | |
width: 50, | |
height: 50, | |
child: RaisedButton( | |
key: _key2, | |
onPressed: () {}, | |
), | |
), | |
), | |
Align( | |
alignment: Alignment.bottomCenter, | |
child: Padding( | |
padding: const EdgeInsets.all(50.0), | |
child: SizedBox( | |
width: 50, | |
height: 50, | |
child: RaisedButton( | |
key: _key3, | |
onPressed: () {}, | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
void initTargets() { | |
targets.add( | |
TargetFocus( | |
identify: "Target 0", | |
keyTarget: _key1, | |
contents: [ | |
TargetContent( | |
align: ContentAlign.bottom, | |
child: Container( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
crossAxisAlignment: CrossAxisAlignment.center, | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
Text( | |
"Titulo lorem ipsum", | |
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black, fontSize: 20.0), | |
), | |
Padding( | |
padding: const EdgeInsets.only(top: 10.0), | |
child: Text( | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.", | |
style: TextStyle(color: Colors.black), | |
), | |
) | |
], | |
), | |
)) | |
], | |
), | |
); | |
targets.add( | |
TargetFocus( | |
identify: "Target 1", | |
keyTarget: key, | |
color: Colors.red, | |
contents: [ | |
TargetContent( | |
align: ContentAlign.bottom, | |
child: Container( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
Text( | |
"Titulo lorem ipsum", | |
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 20.0), | |
), | |
Padding( | |
padding: const EdgeInsets.only(top: 10.0), | |
child: Text( | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.", | |
style: TextStyle(color: Colors.white), | |
), | |
) | |
], | |
), | |
), | |
) | |
], | |
shape: ShapeLightFocus.RRect, | |
radius: 5, | |
), | |
); | |
targets.add(TargetFocus( | |
identify: "Target 2", | |
keyTarget: _key2, | |
contents: [ | |
TargetContent( | |
align: ContentAlign.top, | |
child: Container( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.only(bottom: 20.0), | |
child: Text( | |
"Multiples contents", | |
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0), | |
), | |
), | |
Text( | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.", | |
style: TextStyle(color: Colors.white), | |
), | |
], | |
), | |
)), | |
TargetContent( | |
align: ContentAlign.bottom, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.only(bottom: 20.0), | |
child: Text( | |
"Multiples contents", | |
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0), | |
), | |
), | |
Container( | |
child: Text( | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.", | |
style: TextStyle(color: Colors.white), | |
), | |
), | |
], | |
)) | |
], | |
shape: ShapeLightFocus.Circle, | |
)); | |
targets.add(TargetFocus( | |
identify: "Target 3", | |
keyTarget: _key3, | |
color: Colors.red, | |
contents: [ | |
TargetContent( | |
align: ContentAlign.top, | |
child: Container( | |
child: Column( | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.all(10.0), | |
child: Image.network( | |
"https://flutterdevs.com/wp-content/uploads/2020/10/logog.png",fit: BoxFit.contain, | |
height: 120, | |
), | |
), | |
Padding( | |
padding: const EdgeInsets.only(bottom: 20.0), | |
child: Text( | |
"Image Load network", | |
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0), | |
), | |
), | |
Text( | |
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar tortor eget maximus iaculis.", | |
style: TextStyle(color: Colors.white), | |
), | |
], | |
), | |
)) | |
], | |
shape: ShapeLightFocus.Circle, | |
)); | |
} | |
void showTutorial() { | |
tutorialCoachMark = TutorialCoachMark( | |
context, | |
targets: targets, | |
colorShadow: Colors.pink, | |
textSkip: "SKIP", | |
paddingFocus: 10, | |
opacityShadow: 0.8, | |
onFinish: () { | |
print("finish"); | |
}, | |
onClickTarget: (target) { | |
print('onClickTarget: $target'); | |
}, | |
onSkip: () { | |
print("skip"); | |
}, | |
onClickOverlay: (target) { | |
print('onClickOverlay: $target'); | |
}, | |
)..show(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment