flutter_introduction_tooltip

Description:

flutter introduction tooltip

Flutter Introduction Tooltip #
A new Flutter plugin to show introduction tooltip for first timer user of the app.
It should support both Android and iOS since it's pure written in Dart.
Getting Started #
For help getting started with Flutter, view our online
documentation.
For help on editing plugin code, view the documentation.
Screenshots #

Installation and Usage #
To install this package, you need to add flutter_introduction_tooltip (0.1.0 or higher) to the dependencies
list of the pubspec.yaml file as follow:
dependencies:
flutter:
sdk: flutter

flutter_introduction_tooltip: ^0.1.0
copied to clipboard
Then run command flutter packages get on the console.
How to use #
Add the import to flutter_introduction_tooltip/flutter_introduction_tooltip.dart
Create a global key and attach to the widget you preferred.
import 'package:flutter_introduction_tooltip/flutter_introduction_tooltip.dart

GlobalKey globalKey = GlobalKey();
bool isShowing = false;

@override
Widget build(BuildContext context) {
showTutorial(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Builder(
builder: (BuildContext context) {
showTutorial(context);
return Stack(
children: <Widget> [
Container(
width: MediaQuery
.of(context)
.size
.width,
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.blue,
key: globalKey,
child: Text(
'Running on: $_platformVersion\n',
),
),
),
],
);
}
),
),
);

void showTutorial(BuildContext context) async {
if (!isShowing) {
new Timer(Duration(milliseconds: 100), () async {
try {
FlutterIntroductionTooltip.showTopTutorialOnWidget(
context,
globalKey,
Colors.blue,
() => popAndNextTutorial(context),
"MAMA",
"MAMA IS A LOREM IPSUM",
"ALRIGHT");
print("SHOWING");
setState(() {
isShowing = true;
});
} catch (e) {
print("ERROR $e");
}
});
}
}

copied to clipboard
If you want the dialog to be on top of the widget, use showTopTutorialOnWidget,
If you want the dialog to be on bottom of the widget, use showBottomTutorialOnWidget
The reason i use delay for the execution is because i run the function on the build method, and the build hasn't done yet so
i can't draw the tutorial right there, so i delayed it.
Other alternative for doing this is to use library like https://pub.dartlang.org/packages/after_layout
Call Parameters #
MANDATORY

BuildContext (current context)
GlobalKey (globalkey attached to your widget)
Color primaryColor (primary color used for the button and circle pointer)
VoidCallback positiveCallback (positive callback used when the positive button is clicked)
String title (title of the dialog)
String subtitlte (subtitle of the dialog)
String positiveBtn (title of the positive btn)

OPTIONAL

LineHorizontalPosition lineHorizontalPosition (where you want the line to be, the options is Left, Center, and Right)
Widget childBoxWidget (the custom widget if you don't want to use the dialog i provided)
bool showLine *defaults to true (whether you want to show the line on top of the dialog or not)
double lineHeight *defaults to 7.0 (the height of the line you desired)
Widget circleWidget (the circle widget at the end of the line if you want to customize it)
bool barrierDismissable *defaults to true (whether you want the background click will dismiss it or not)

Contributors #

Angga Dwi Arifandi github

Contributions #
Any contributions is very welcomed in this package, just fork this repository to your own github account and create a
pull request with the changes description.
Contact #
If you need to ask or discuss about anything, just email me at [email protected]
CHANGES #

0.0.4 (BREAKING)

Migrate to AndroidX and change kotlin dependencies
Fix example


0.0.3

Fix missing commas (compile error)


0.0.2

Refactor


0.0.1

Initial Version