Flutter Tutorial Coach Mark Example
In this article, we are going to create flutter app tutorial UI using flutter tutorial coach mark package. You can also check out flutter intro slider to give app introduction to users.
Nowadays most of the mobile applications display app tutorial UI to users when they open app first time. Tutorial coach mark library provides components to highlight app functionalities. We can also customize this introduction UI such as we can add any widget to display app info to users.
We can change alignment, color, shape of this app information UI using this tutorial coach package. Whenever user clicks on item which we will highlight, UI is changing. Users can also skip this app tutorial using skip button which will be displayed at bottom.
TargetFocus widget is used to customize app tutorial UI. This widget has many properties like color, identify, keyTarget, contents, shape, radius etc. color property is used to set background color of UI when item is highlighted. We can give unique name to each target so we can identify.
contents property is used to take TargetContent widgets in array to display app introduction UI. We can add our info about app functionality in this TargetContent widget using child property. After adding all targets in array, we have to give them to targets property in TutorialCoachMark widget.
The most important thing in this flutter example is key. First we need to add keys to items which we want to highlight to users to give introduction about them. Then we will submit same key to keyTarget property in TargetFocus widget so that item will be highlighted according to our given requirement. We can not add same keys to multiple items like listview items.
We can also change shadow color of highlighted item using colorShadow property of TutorialCoachMark widget. We can add skip text using textSkip property. We can also customize this skip text using textSkipStyle property.
paddingFocus attribute is used to give padding around highlighted item. We can also change shadow opacity using opacityShadow property. We can highlight item in two shapes circle or rectangle using shape property.
onSkip callback is called when users click on skip button. onClickTarget callback is used to detect when users click on item which is highlighted. onClickOverlay property is called when users taps on layout of app tutorial UI. We are notified after users complete app tutorial with the help of onFinish callback.
Add required dependency in your pubspec.yaml file
App UI of Flutter Tutorial for Beginners
SoccerPlayerInfo(“Cristiano Ronaldo”, “Forward”, “Manchester United”, “Portugal”),
];
GlobalKey globalKey1 = GlobalKey();
GlobalKey globalKey2 = GlobalKey();
GlobalKey globalKey3 = GlobalKey();
GlobalKey globalKey4 = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
title: Text(“Flutter Tutorial Coach Mark Sample”),
actions: <Widget>[
IconButton(
key: globalKey1,
icon: Icon(Icons.add),
onPressed: () {},
)
],
),
body: Container(
padding: EdgeInsets.all(15),
child: ListView.builder(
itemCount: listSoccerPlayersInfo.length,
itemBuilder: (context, position) {
SoccerPlayerInfo getSoccerPlayerInfo =
listSoccerPlayersInfo[position];
var soccerPlayerName = getSoccerPlayerInfo.playerName;
var soccerPlayingPosition = getSoccerPlayerInfo.playingPosition;
var soccerPlayerClubName = getSoccerPlayerInfo.clubName;
var soccerPlayerCountryName = getSoccerPlayerInfo.countryName;
return Card(
key: globalKey2,
elevation: 8,
child: Container(
height: 80,
padding: EdgeInsets.all(15),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text(soccerPlayerName,
style: TextStyle(fontSize: 18))),
Align(
alignment: Alignment.topRight,
child: Container(
margin: EdgeInsets.only(right: 50),
child: IconButton(
key: globalKey3,
icon: Icon(Icons.edit),
onPressed: () {}),
),
),
Align(
alignment: Alignment.topRight,
child: IconButton(
key: globalKey4,
icon: Icon(Icons.delete),
onPressed: () {}),
),
Align(
alignment: Alignment.bottomLeft,
child: Text(
“$soccerPlayingPosition | $soccerPlayerClubName | $soccerPlayerCountryName”,
style: TextStyle(fontSize: 17))),
],
),
),
);
})),
);
}
Step 1 for App Tutorial
listTargets.add(
TargetFocus(
color: Colors.orangeAccent,
identify: “Target 1”,
keyTarget: globalKey1,
contents: [
TargetContent(
align: ContentAlign.bottom,
child: Container(
margin: EdgeInsets.only(top: 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
“Add New Soccer Player”,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white,
),
),
],
),
))
],
shape: ShapeLightFocus.Circle,
),
);
}
Step 2 for ShowCaseView Flutter
TargetFocus(
color: Colors.deepOrangeAccent,
identify: “Target 2”,
keyTarget: globalKey2,
contents: [
TargetContent(
align: ContentAlign.bottom,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
“Soccer Player Details”,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white,
),
),
],
),
),
)
],
shape: ShapeLightFocus.RRect,
radius: 7,
),
);
Step 3 for Flutter Tutorial
color: Colors.pinkAccent,
identify: “Target 3”,
keyTarget: globalKey3,
contents: [
TargetContent(
align: ContentAlign.bottom,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
“Edit Soccer Player”,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white,
),
),
],
),
)),
],
shape: ShapeLightFocus.Circle,
));
Step 4 for Flutter App Introduction
color: Colors.tealAccent,
identify: “Target 4”,
keyTarget: globalKey4,
contents: [
TargetContent(
align: ContentAlign.bottom,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
“Delete Soccer Player”,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white,
),
),
],
),
)),
],
shape: ShapeLightFocus.Circle,
));
Display Flutter App Tutorial UI for Beginners
List<TargetFocus> listTargets = [];
@override
void initState() {
initTargets();
showAppTutorial();
super.initState();
}
void showAppTutorial() {
tutorialCoachMark = TutorialCoachMark(
context,
targets: listTargets,
colorShadow: Colors.grey,
textSkip: “SKIP TUTORIAL”,
textStyleSkip: TextStyle(fontSize: 20),
paddingFocus: 8,
opacityShadow: 0.9,
onFinish: () {
},
onClickTarget: (target) {
},
onSkip: () {
},
onClickOverlay: (target) {
},
)..show();
}
Pingback: Integrating Hero Flutter Animations - CodingWithDhrumil
Pingback: PageView Flutter With Example - CodingWithDhrumil
Pingback: ListView In Flutter With Different Types - CodingWithDhrumil