Text label that explains what a certain button in the app would do

Question

I need to create a text label component that will act as an in-app tutorial explanatory label in Flutter. This text label should show up above a button explaining the clicking on that button would result in creating a new entry.

I tried using a Tooltip widget to wrap the button. But tooltip shows up only when long pressed the button. I need this widget to be visible if the user doesn't already have any entries created.

Answer 1

Currently, I thought of giving you this short but small help about this. I just want you to see whether it is helping you in any way or not.

My idea is to trigger the tooltip programatically. Let me know tell you how to do that, although there is no available documentation to do that. I did some research too on this.

1. Use ensureTooltipVisible from _TooltipState using a GlobalKey to fetch it.
2. Typically you'd do the following field inside the widget instantiating Tooltip : final key = new GlobalKey();

Then in your tooltip you will assign this key

final _key = new GlobalKey()

ToolTip(
  key: _key
)

And in the initState() you just check whether there are some entries or not:

initState(){
  super.initState();
  if(_yourData == null){
    //that's how you trigger it
    final dynamic tooltip = _key.currentState;
    tooltip.ensureTooltipVisible();
  }
}

initState() is the method which gets initialized when you open up your page every time. So as soon as you will open up your page, the info will be checked and hence it will show accordingly. Let me know if that helps. :)

Answer 2

Can make using OverlayEntry.

Here is sample code

final overlayEntry = OverlayEntry(
  builder: (BuildContext context) => Positioned(
    top: _yourCustomTop,
    left: _yourCustomLeft,
    child: FadeTransition(
      opacity: CurvedAnimation(
        parent: _yourController,
        curve: Curves.fastOutSlowIn,
      ),
      child: Material(
        color: const Color(0x00ffffff),
        child: Container(
          decoration: ShapeDecoration(
            color: Colors.white,
            shape: TooltipShapeBorder(radius: 6, arrowArc: 0.2),
            shadows: [
              const BoxShadow(
                color: Colors.black26,
                blurRadius: 4.0,
                offset: const Offset(2, 2),
              ),
            ],
          ),
          child: SizedBox(
            width: 84,
            height: 44,
            child: Center(
              child: Text('_yourString'),
            ),
          ),
        ),
      );
    ),
  ),
);
Overlay.of(context).insert(_overlayEntry);

TooltipShapeBorder

from here.

import 'package:flutter/material.dart';

class TooltipShapeBorder extends ShapeBorder {
  final double arrowWidth;
  final double arrowHeight;
  final double arrowArc;
  final double radius;

  TooltipShapeBorder({
    this.radius = 16.0,
    this.arrowWidth = 20.0,
    this.arrowHeight = 10.0,
    this.arrowArc = 0.0,
  }) : assert(arrowArc <= 1.0 && arrowArc >= 0.0);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: arrowHeight);

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, arrowHeight));
    double x = arrowWidth, y = arrowHeight, r = 1 - arrowArc;
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)))
      ..moveTo(rect.bottomCenter.dx + x / 2, rect.bottomCenter.dy)
      ..relativeLineTo(-x / 2 * r, y * r)
      ..relativeQuadraticBezierTo(-x / 2 * (1 - r), y * (1 - r), -x * (1 - r), 0)
      ..relativeLineTo(-x / 2 * r, -y * r);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

Answer 3

You can already show a label quite easily like this:

const Tooltip(
      message: 'Hi there!',
      triggerMode: TooltipTriggerMode.tap, // ensures the label appears when tapped
      preferBelow: false, // use this if you want the label above the widget
      child: Icon(Icons.interests),
    )

You can use triggerMode: TooltipTriggerMode.manual for further customization ;)

Or you could use the showcaseview package

You can find more info for the Tooltip widget here