simple_tooltip 0.1.12

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

simple_tooltip #

A plugin for creating tooltips with shape of a balloon

You can customize multiple elements

💻 Installation #

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  simple_tooltip: <latest version>

Usage #

Basic #

You can get started really simple, just add

Basic

SimpleTooltip(
        tooltipTap: () {
        print("Tooltip tap");
        },
        animationDuration: Duration(seconds: 3),
        show: true,
        tooltipDirection: TooltipDirection.up,
        child: Container(
        width: 200,
        height: 120,
        child: Placeholder(),
        ),
        content: Text(
        "Some text example!!!!",
        style: TextStyle(
            color: Colors.black,
            fontSize: 18,
            decoration: TextDecoration.none,
        ),
        ),
    ),

Full Api #

/// The [child] which the tooltip will target to
  final Widget child;

  /// Sets the tooltip direction
  /// defaults to [TooltipDirection.up]
  final TooltipDirection tooltipDirection;

  /// Defines the content that its placed inside the tooltip ballon
  final Widget content;

  /// If true, it will display the tool , if false it will hide it
  final bool show;

  final Function onClose;

  /// Sets the content padding
  /// defautls to: `const EdgeInsets.symmetric(horizontal: 20, vertical: 16),`
  final EdgeInsets ballonPadding;

  /// sets the duration of the tooltip entrance animation
  /// defaults to [460] milliseconds
  final Duration animationDuration;

  /// [top], [right], [bottom], [left] position the Tooltip absolute relative to the whole screen
  double top, right, bottom, left;

  /// [minWidth], [minHeight], [maxWidth], [maxHeight] optional size constraints.
  /// If a constraint is not set the size will ajust to the content
  double minWidth, minHeight, maxWidth, maxHeight;

  ///
  /// The distance of the tip of the arrow's tip to the center of the target
  final double arrowTipDistance;

  ///
  /// The length of the Arrow
  final double arrowLength;

  ///
  /// the stroke width of the border
  final double borderWidth;

  ///
  /// The minium padding from the Tooltip to the screen limits
  final double minimumOutSidePadding;

  ///
  /// The corder radii of the border
  final double borderRadius;

  ///
  /// The width of the arrow at its base
  final double arrowBaseWidth;

  ///
  /// The color of the border
  final Color borderColor;

  ///
  /// The color of the border
  final Color backgroundColor;

  ///
  /// Set a custom list of [BoxShadow]
  /// defaults to `const BoxShadow(color: const Color(0x45222222), blurRadius: 8, spreadRadius: 2),`
  final List<BoxShadow> customShadows;

  ///
  /// Set a handler for listening to a `tap` event on the tooltip (This is the recommended way to put your logic for dismissing the tooltip)
  final Function() tooltipTap;

  ///
  /// If you want to automatically dismiss the tooltip whenever a user taps on it, set this flag to [true]
  /// For more control on when to dismiss the tooltip please rely on the [show] property and [tooltipTap] handler
  /// defaults to [false]
  final bool hideOnTooltipTap;

  ///
  /// Pass a `RouteObserver` so that the widget will listen for route transition and will hide tooltip when
  /// the widget's route is not active
  final RouteObserver<PageRoute> routeObserver;

Screenshots #

Animated

This plugin was inspired by super_tooltip #

Getting Started #

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[0.1.12] - 9/07/20. #

  • Small change

[0.1.11] - 9/07/20. #

  • Added ObfuscateTooltipItem widget, it allows for a tooltip to automatically hide when a ObfuscateTooltipItem widget it's inside tooltip's boundings, useful for autohide on Dialogs or Stacks. For more detail look at the new Obfucaste example;

[0.1.10] - 8/06/20. #

  • Some fixes on implementation of route aware logic

[0.1.9] - 8/06/20. #

  • New [routeObserver] property, widget will listen for route transition and will hide tooltip when the widget's route is not active

[0.1.8] - 9/05/20. #

[0.1.7] - 9/05/20. #

[0.1.6] - 9/05/20. #

[0.1.5] - 28/04/20. #

  • Fix issue where not setting tooltip offset correctly at first build round

[0.1.4] - 28/04/20. #

  • Fix tooltip not handling "tap" events in specific scenarios

[0.1.3] - 11/02/20. #

  • Minor Fixes

[0.1.2] - 11/02/20. #

  • Fix clipBehavior: Clip.none, error

[0.1.1] - 10/02/20. #

  • Updated README

[0.1.0] - 10/02/20. #

  • First release.

[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:example/basics_example_page.dart';

import 'package:example/obfuscate_example_page.dart';
import 'package:flutter/material.dart';
import 'animated_example_page.dart';

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();
    return _MyAppData(
      routeObserver: routeObserver,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: OptionsPage(),
        navigatorObservers: [
          routeObserver,
        ],
      ),
    );
  }

  static _MyAppData of(BuildContext context) {
    return _MyAppData.of(context);
  }
}

class _MyAppData extends InheritedWidget {
  final RouteObserver<PageRoute> routeObserver;

  _MyAppData({
    Key key,
    this.child,
    this.routeObserver,
  }) : super(key: key, child: child);

  final Widget child;

  static _MyAppData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<_MyAppData>();
  }

  @override
  bool updateShouldNotify(_MyAppData oldWidget) {
    return oldWidget.routeObserver != routeObserver;
  }
}

class OptionsPage extends StatelessWidget {
  const OptionsPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Tooltip"),
      ),
      body: Container(
        height: double.infinity,
        width: double.maxFinite,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text("Animated example"),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (ctx) => AnimatedExamplePage(title: 'Flutter Demo Home Page'),
                  ));
                },
              ),
              RaisedButton(
                child: Text("Basics"),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (ctx) => BasicsExamplePage(),
                  ));
                },
              ),
              RaisedButton(
                child: Text("Obfuscate"),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (ctx) => ObfuscateExamplePage(),
                  ));
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  simple_tooltip: ^0.1.12

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:simple_tooltip/simple_tooltip.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
88
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • simple_tooltip that is a package requiring null.

Health suggestions

Fix lib/src/balloon_positioner.dart. (-1.49 points)

Analysis of lib/src/balloon_positioner.dart reported 3 hints:

line 47 col 10: The value of the field '_ballonWidth' isn't used.

line 48 col 10: The value of the field '_ballonHeight' isn't used.

line 102 col 11: The value of the local variable 'debugg' isn't used.

Fix lib/src/tooltip.dart. (-0.50 points)

Analysis of lib/src/tooltip.dart reported 1 hint:

line 16 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: SimpleTooltip.top, SimpleTooltip.right, SimpleTooltip.bottom, SimpleTooltip.left, SimpleTooltip.minWidth, SimpleTooltip.minHeight, SimpleTooltip.maxWidth, SimpleTooltip.maxHeight

Format lib/src/balloon.dart.

Run flutter format to format lib/src/balloon.dart.

Format lib/src/obfuscate_tooltip_item.dart.

Run flutter format to format lib/src/obfuscate_tooltip_item.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test