Apply Desktop specs for Tooltip (#68681)
This commit is contained in:
parent
f468fd6663
commit
b99443c7ff
@ -170,10 +170,8 @@ class Tooltip extends StatefulWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
||||||
static const double _defaultTooltipHeight = 32.0;
|
|
||||||
static const double _defaultVerticalOffset = 24.0;
|
static const double _defaultVerticalOffset = 24.0;
|
||||||
static const bool _defaultPreferBelow = true;
|
static const bool _defaultPreferBelow = true;
|
||||||
static const EdgeInsetsGeometry _defaultPadding = EdgeInsets.symmetric(horizontal: 16.0);
|
|
||||||
static const EdgeInsetsGeometry _defaultMargin = EdgeInsets.all(0.0);
|
static const EdgeInsetsGeometry _defaultMargin = EdgeInsets.all(0.0);
|
||||||
static const Duration _fadeInDuration = Duration(milliseconds: 150);
|
static const Duration _fadeInDuration = Duration(milliseconds: 150);
|
||||||
static const Duration _fadeOutDuration = Duration(milliseconds: 75);
|
static const Duration _fadeOutDuration = Duration(milliseconds: 75);
|
||||||
@ -215,6 +213,43 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
|||||||
GestureBinding.instance!.pointerRouter.addGlobalRoute(_handlePointerEvent);
|
GestureBinding.instance!.pointerRouter.addGlobalRoute(_handlePointerEvent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// https://material.io/components/tooltips#specs
|
||||||
|
double _getDefaultTooltipHeight() {
|
||||||
|
final ThemeData theme = Theme.of(context)!;
|
||||||
|
switch (theme.platform) {
|
||||||
|
case TargetPlatform.macOS:
|
||||||
|
case TargetPlatform.linux:
|
||||||
|
case TargetPlatform.windows:
|
||||||
|
return 24.0;
|
||||||
|
default:
|
||||||
|
return 32.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
EdgeInsets _getDefaultPadding() {
|
||||||
|
final ThemeData theme = Theme.of(context)!;
|
||||||
|
switch (theme.platform) {
|
||||||
|
case TargetPlatform.macOS:
|
||||||
|
case TargetPlatform.linux:
|
||||||
|
case TargetPlatform.windows:
|
||||||
|
return const EdgeInsets.symmetric(horizontal: 8.0);
|
||||||
|
default:
|
||||||
|
return const EdgeInsets.symmetric(horizontal: 16.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
double _getDefaultFontSize() {
|
||||||
|
final ThemeData theme = Theme.of(context)!;
|
||||||
|
switch (theme.platform) {
|
||||||
|
case TargetPlatform.macOS:
|
||||||
|
case TargetPlatform.linux:
|
||||||
|
case TargetPlatform.windows:
|
||||||
|
return 10.0;
|
||||||
|
default:
|
||||||
|
return 14.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Forces a rebuild if a mouse has been added or removed.
|
// Forces a rebuild if a mouse has been added or removed.
|
||||||
void _handleMouseTrackerChange() {
|
void _handleMouseTrackerChange() {
|
||||||
if (!mounted) {
|
if (!mounted) {
|
||||||
@ -375,6 +410,7 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
|||||||
if (theme.brightness == Brightness.dark) {
|
if (theme.brightness == Brightness.dark) {
|
||||||
defaultTextStyle = theme.textTheme.bodyText2!.copyWith(
|
defaultTextStyle = theme.textTheme.bodyText2!.copyWith(
|
||||||
color: Colors.black,
|
color: Colors.black,
|
||||||
|
fontSize: _getDefaultFontSize(),
|
||||||
);
|
);
|
||||||
defaultDecoration = BoxDecoration(
|
defaultDecoration = BoxDecoration(
|
||||||
color: Colors.white.withOpacity(0.9),
|
color: Colors.white.withOpacity(0.9),
|
||||||
@ -383,6 +419,7 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
|||||||
} else {
|
} else {
|
||||||
defaultTextStyle = theme.textTheme.bodyText2!.copyWith(
|
defaultTextStyle = theme.textTheme.bodyText2!.copyWith(
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
|
fontSize: _getDefaultFontSize(),
|
||||||
);
|
);
|
||||||
defaultDecoration = BoxDecoration(
|
defaultDecoration = BoxDecoration(
|
||||||
color: Colors.grey[700]!.withOpacity(0.9),
|
color: Colors.grey[700]!.withOpacity(0.9),
|
||||||
@ -390,8 +427,8 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
height = widget.height ?? tooltipTheme.height ?? _defaultTooltipHeight;
|
height = widget.height ?? tooltipTheme.height ?? _getDefaultTooltipHeight();
|
||||||
padding = widget.padding ?? tooltipTheme.padding ?? _defaultPadding;
|
padding = widget.padding ?? tooltipTheme.padding ?? _getDefaultPadding();
|
||||||
margin = widget.margin ?? tooltipTheme.margin ?? _defaultMargin;
|
margin = widget.margin ?? tooltipTheme.margin ?? _defaultMargin;
|
||||||
verticalOffset = widget.verticalOffset ?? tooltipTheme.verticalOffset ?? _defaultVerticalOffset;
|
verticalOffset = widget.verticalOffset ?? tooltipTheme.verticalOffset ?? _defaultVerticalOffset;
|
||||||
preferBelow = widget.preferBelow ?? tooltipTheme.preferBelow ?? _defaultPreferBelow;
|
preferBelow = widget.preferBelow ?? tooltipTheme.preferBelow ?? _defaultPreferBelow;
|
||||||
|
@ -741,6 +741,38 @@ void main() {
|
|||||||
));
|
));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('Tooltip default size, shape, and color test for Desktop', (WidgetTester tester) async {
|
||||||
|
// Regressing test for https://github.com/flutter/flutter/issues/68601
|
||||||
|
final GlobalKey key = GlobalKey();
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
home: Tooltip(
|
||||||
|
key: key,
|
||||||
|
message: tooltipText,
|
||||||
|
child: const SizedBox(
|
||||||
|
width: 0.0,
|
||||||
|
height: 0.0,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
(key.currentState as dynamic).ensureTooltipVisible();
|
||||||
|
await tester.pump(const Duration(seconds: 2)); // faded in, show timer started (and at 0.0)
|
||||||
|
|
||||||
|
final RenderParagraph tooltipRenderParagraph = tester.renderObject<RenderParagraph>(find.text(tooltipText));
|
||||||
|
expect(tooltipRenderParagraph.textSize.height, equals(10.0));
|
||||||
|
|
||||||
|
final RenderBox tip = tester.renderObject(
|
||||||
|
_findTooltipContainer(tooltipText),
|
||||||
|
);
|
||||||
|
expect(tip.size.height, equals(24.0));
|
||||||
|
expect(tip.size.width, equals(46.0));
|
||||||
|
expect(tip, paints..rrect(
|
||||||
|
rrect: RRect.fromRectAndRadius(tip.paintBounds, const Radius.circular(4.0)),
|
||||||
|
color: const Color(0xe6616161),
|
||||||
|
));
|
||||||
|
}, variant: const TargetPlatformVariant(<TargetPlatform>{TargetPlatform.macOS, TargetPlatform.linux, TargetPlatform.windows}));
|
||||||
|
|
||||||
testWidgets('Can tooltip decoration be customized', (WidgetTester tester) async {
|
testWidgets('Can tooltip decoration be customized', (WidgetTester tester) async {
|
||||||
final GlobalKey key = GlobalKey();
|
final GlobalKey key = GlobalKey();
|
||||||
const Decoration customDecoration = ShapeDecoration(
|
const Decoration customDecoration = ShapeDecoration(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user