super_tooltip 0.9.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 86

super_tooltip

SuperTooltip is derived from a widget I wrote for a client. It is super flexible and allows you to display ToolTips in the overlay of the screen. The whole screen gets covered with a typically translucent background color. Tapping on the background closes the Tooltip.

My Client allowed me to publish this widget but currently you have to send him an email to get a commercial licence which will be given free if you aren't a competitor.

AUTHOR

Developed by Thomas Burkhart.

Concept and Copyright by Marcelo Glasberg.

LICENSE

GPL v3, for the moment. Will be changed to a commercially friendly license as soon >as possible. Meanwhile, please request a free commercially friendly license here: >marcglasberg @ gmail dot com. Most requests will be granted very quickly.

A tooltip has to be created inside a StatefulWidget that should be the target for the Tooltip it can be shown whenever you like. In the example we show it as a response of a TouchEvent.

// We create the tooltip on the first use
tooltip = SuperTooltip(
  popupDirection: TooltipDirection.down,
  content: new Material(
      child: Text(
        "Lorem ipsum dolor sit amet, consetetur sadipscingelitr, "
        "sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat, "
        "sed diam voluptua. At vero eos et accusam et justoduo dolores et ea rebum. ",
    softWrap: true,
  )),
);

tooltip.show(context);

The the center of the passed context defines the target of the arrow of the tooltip. As this widget as many features I won't list them all here. Please refer to the API docs and the source comments. Instead I will show some of the features here. The first example was using all default values.

Let's add a red close button, making popup to the right and limit its width:

// We create the tooltip on the first use
tooltip = SuperTooltip(
  popupDirection: TooltipDirection.right,
  maxWidth: 200.0,
  showCloseButton: ShowCloseButton.inside,
  closeButtonColor: Colors.red,
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",
    softWrap: true,
  ),
);

Let's nail the bubble into a fixed position and move the close button to the outside and remove the shadow

tooltip = SuperTooltip(
  popupDirection: TooltipDirection.up,
  top: 50.0,
  right: 5.0,
  left: 100.0,
  showCloseButton: ShowCloseButton.outside,
  hasShadow: false,
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",
    softWrap: true,
  ),
      )),
);

Maybe you want to allow the user to touch an area below the overlay without closing the Tooltip? Open the area around the target this is quite easy. Additional we now open to the left and moved the tip of the arrow a bit away from the target:


// Get the center of our target as global coordinates relative to overlay coordinates:
RenderBox renderBox = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
var targetGlobalCenter =
    renderBox.localToGlobal(renderBox.size.center(Offset.zero), ancestor: overlay);


tooltip = SuperTooltip(
  popupDirection: TooltipDirection.left,
  top: 150.0,      
  left: 30.0,
  arrowTipDistance: 10.0,
  showCloseButton: ShowCloseButton.inside,
  closeButtonColor: Colors.black,
  closeButtonSize: 30.0,
  hasShadow: false,
  touchThrougArea: new Rect.fromCircle(center:targetGlobalCenter, radius: 40.0),
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.only(top:20.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetursadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt utlabore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam etjusto duo dolores et ea rebum. ",
    softWrap: true,
  ),
);

If you want the ToolTip to cover the maximum vertical available space, just set snapsFarAwayVertically: true. Also we can made the border green and thicker and the touch through area a rectangle.

tooltip = SuperTooltip(
   popupDirection: TooltipDirection.left,
   arrowTipDistance: 15.0,
   arrowBaseWidth: 40.0,
   arrowLength: 40.0,
   borderColor: Colors.green,
   borderWidth: 5.0,
   snapsFarAwayVertically: true,
   showCloseButton: ShowCloseButton.inside,
   hasShadow: false,
   touchThrougArea: new Rect.fromLTWH(targetGlobalCenter.dx-100,targetGlobalCenter.dy-100, 200.0, 160.0),
   touchThroughAreaShape: ClipAreaShape.rectangle,
   content: new Material(
       child: Padding(
         padding: const EdgeInsets.only(top:20.0),
         child: Text(
           "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
           "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyamerat, "
           "sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. ",
     softWrap: true,
   ),

[0.9.0] - 8.7.20018

  • Initial release.

example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:super_tooltip/super_tooltip.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
  }) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.red,
      body: new Center(child: TargetWidget()),
    );
  }
}

class TargetWidget extends StatefulWidget {
  const TargetWidget({Key key}) : super(key: key);

  @override
  _TargetWidgetState createState() => new _TargetWidgetState();
}

class _TargetWidgetState extends State<TargetWidget> {
  SuperTooltip tooltip;

  Future<bool> _willPopCallback() async {
    // If the tooltip is open we don't pop the page on a backbutton press
    // but close the ToolTip
    if (tooltip.isOpen) {
      tooltip.close();
      return false;
    }
    return true;
  }

  void onTap() {
    if (tooltip != null && tooltip.isOpen) {
      tooltip.close();
      return;
    }

    RenderBox renderBox = context.findRenderObject();
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();

    var targetGlobalCenter =
        renderBox.localToGlobal(renderBox.size.center(Offset.zero), ancestor: overlay);

    // We create the tooltip on the first use
    tooltip = SuperTooltip(
      popupDirection: TooltipDirection.left,
      arrowTipDistance: 15.0,
      arrowBaseWidth: 40.0,
      arrowLength: 40.0,
      borderColor: Colors.green,
      borderWidth: 5.0,
      snapsFarAwayVertically: true,
      showCloseButton: ShowCloseButton.inside,
      hasShadow: false,
      touchThrougArea: new Rect.fromLTWH(targetGlobalCenter.dx-100, targetGlobalCenter.dy-100, 200.0, 160.0),
      touchThroughAreaShape: ClipAreaShape.rectangle,

      content: new Material(
          child: Padding(
            padding: const EdgeInsets.only(top:20.0),
            child: Text(
              "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
              "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, "
              "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",
        softWrap: true,
      ),
          )),
    );

    tooltip.show(context);
  }

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: _willPopCallback,
      child: new GestureDetector(
        onTap: onTap,
        child: Container(
            width: 20.0,
            height: 20.0,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            )),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  super_tooltip: ^0.9.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:super_tooltip/super_tooltip.dart';
  
Version Uploaded Documentation Archive
0.9.0 Jul 8, 2018 Go to the documentation of super_tooltip 0.9.0 Download super_tooltip 0.9.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
73
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Sep 18, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

Format lib/super_tooltip.dart.

Run flutter format to format lib/super_tooltip.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test