Flutter Tooltip on One Tap
5,579
Solution 1
as an option you can create simple wrapper widget
full example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Home")),
body: Center(
child: MyTooltip(
message: 'message',
child: Image.network('https://picsum.photos/seed/picsum/200/300', height: 40),
),
),
);
}
}
class MyTooltip extends StatelessWidget {
final Widget child;
final String message;
MyTooltip({@required this.message, @required this.child});
@override
Widget build(BuildContext context) {
final key = GlobalKey<State<Tooltip>>();
return Tooltip(
key: key,
message: message,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => _onTap(key),
child: child,
),
);
}
void _onTap(GlobalKey key) {
final dynamic tooltip = key.currentState;
tooltip?.ensureTooltipVisible();
}
}
Solution 2
The easiest way to do it is to use triggerMode
property inside Tooltip constructor.
Tooltip(
message: item.description ?? '',
triggerMode: TooltipTriggerMode.tap,
child: Text(item.label ?? '',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 1.7.t.toDouble(),
color: Colors.black.withOpacity(0.6),
)),
)
Author by
Moiz Travadi
Updated on December 27, 2022Comments
-
Moiz Travadi over 1 year
I want to show a tooltip on a single tap, not a long tap.
Can anyone help me with this?
Tooltip( message: e.title, child: Card( semanticContainer: true, child: Padding( padding: EdgeInsets.symmetric( vertical: 12, horizontal: 12 ), child: Center( child: Image.network( e.icon, height: 40, ), ), ), ), )