TextAlignment support?

[adrianvintu]

Does this plugin support textAlignment, specifically Center?

[stargazing-dino]

Can you be a little more specific? The tooltip should be agnostic to it's content so if your text is inside a larger area and you set it to be centered then I think it'd work

[adrianvintu]

I am using the default material tooltip and it has the alignment "hardcoded" to left, afaik. I wish for a nicer tooltip that can center text.

[stargazing-dino]

Sorry for the late response. Was entirely focused on another package I'm working on.

Although this package takes a large portion of logic from the original Tooltip it doesn't limit the users to solely text. The content can be anything within reason and just_the_tooltip should adapt to the size the child defines. Intrinsically sized elements like text should also work.

content: const Padding(
  padding: EdgeInsets.all(8.0),
  child: Text(
    'Material tooltip has the text alignment set to the left, and it'
    ' looks pretty bad imho',
    textAlign: TextAlign.center,
  ),
),

This comes with drawback that you must limit the width of the tooltip yourself as it will try and take as much as it needs for the text length. Maybe fixable with a ConstrainedBox. I dunno

Closing with a "yes" just_the_tooltip supports alignment so long as the child supports it

[adrianvintu]

Thank you for your answer @Nolence. What does this mean: "you must limit the width of the tooltip yourself"?

Do you maybe have a bit of code to explain it?

[stargazing-dino]

My mistake, just looked at Tooltip implementation and they don't, like I previously thought, constrain your text's width.

Here is their implementation:

Widget result = IgnorePointer(
  child: FadeTransition(
    opacity: animation,
    child: ConstrainedBox(
      constraints: BoxConstraints(minHeight: height), // They only set height here
      child: DefaultTextStyle(
        style: Theme.of(context).textTheme.bodyText2!,
        child: Container(
          decoration: decoration,
          padding: padding,
          margin: margin,
          child: Center(
            widthFactor: 1.0,
            heightFactor: 1.0,
            child: Text(
              message,
              style: textStyle,
            ),
          ),
        ),
      ),
    ),
  )
);

They only limit your height which I guess the user defines.

you must limit the width of the tooltip yourself

I meant that if you have a very long string of text without any line breaks then your tooltip would run the width of your screen. If you are on desktop, this would look a little weird. But I guess Tooltip doesn't stop your from doing this either so it looks like it'd be on the user to say maxWidth of 100 for decently sized tooltips (or, better yet, using a layoutBuilder)

[adrianvintu]

Do you maybe want to build an implementation of what you said? I am a Flutter noob, can probably understand half of what you are saying.

[stargazing-dino]

I'll open an issue for user defined max constraints but I think what you want can already be done with the current package. Do you have an example of what you're trying to build?

[adrianvintu]

Thank you.

For testing I would just need any one screen that onTap shows a "long" text, like the one in the attached image at the top of the thread.

If you develop it, you can definitely put it in the documentation. I think it's a very important feature that may differentiate this plugin from others.

[stargazing-dino]

Instead of docs, I've left a text example in the example folder under default_page.

JustTheTooltip(
  controller: tooltipController,
  tailLength: 20.0,
  tailBaseWidth: 50.0,
  isModal: false,
  preferredDirection: AxisDirection.up,
  margin: margin,
  borderRadius: BorderRadius.circular(8.0),
  offset: 0,
  child: Material(
    color: Colors.grey.shade800,
    shape: const CircleBorder(),
    elevation: 4.0,
    child: const Padding(
      padding: EdgeInsets.all(8.0),
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
    ),
  ),
  content: Padding(
    padding: const EdgeInsets.all(8.0),
    child: ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 240),
      child: const Text(
        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.',
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

You'll notice the maxWidth property. That tells the text it can expand up to 240 width and then it has to go vertical. Without that, the text would expand to the edges. If the text were small such as a few words you'll instead get something like this:

[adrianvintu]

Very cool! Maybe also update one image on https://pub.dev/packages/just_the_tooltip ?

Do you think maybe the const BoxConstraints(maxWidth: 240) would be better as 80% of the screen with? Taking into account landscape/portrait mode.

Or somehow manage to replicate the same behavior as standard Tooltip?