flutter_introduction_tooltip 0.0.4 copy "flutter_introduction_tooltip: ^0.0.4" to clipboard
flutter_introduction_tooltip: ^0.0.4 copied to clipboard

A new Flutter plugin to show introduction tooltip for first time app open

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 #

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 anggadwiarifandi96@gmail.com

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
16
likes
40
points
39
downloads

Publisher

unverified uploader

Weekly Downloads

2024.08.26 - 2025.07.21

A new Flutter plugin to show introduction tooltip for first time app open

Repository (GitHub)

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_introduction_tooltip