Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
b8fb46e4
Commit
b8fb46e4
authored
May 31, 2016
by
Adam Barth
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve tooltip behavior (#4284)
As requested by the material design team. Fixes #4182
parent
787fb3be
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
49 additions
and
64 deletions
+49
-64
tooltip.dart
packages/flutter/lib/src/material/tooltip.dart
+41
-56
tooltip_test.dart
packages/flutter/test/material/tooltip_test.dart
+8
-8
No files found.
packages/flutter/lib/src/material/tooltip.dart
View file @
b8fb46e4
...
@@ -5,6 +5,7 @@
...
@@ -5,6 +5,7 @@
import
'dart:async'
;
import
'dart:async'
;
import
'dart:math'
as
math
;
import
'dart:math'
as
math
;
import
'package:flutter/gestures.dart'
;
import
'package:flutter/widgets.dart'
;
import
'package:flutter/widgets.dart'
;
import
'colors.dart'
;
import
'colors.dart'
;
...
@@ -12,7 +13,7 @@ import 'typography.dart';
...
@@ -12,7 +13,7 @@ import 'typography.dart';
const
double
_kScreenEdgeMargin
=
10.0
;
const
double
_kScreenEdgeMargin
=
10.0
;
const
Duration
_kFadeDuration
=
const
Duration
(
milliseconds:
200
);
const
Duration
_kFadeDuration
=
const
Duration
(
milliseconds:
200
);
const
Duration
_kShowDuration
=
const
Duration
(
seconds:
2
);
const
Duration
_kShowDuration
=
const
Duration
(
milliseconds:
1500
);
/// A material design tooltip.
/// A material design tooltip.
///
///
...
@@ -105,21 +106,8 @@ class _TooltipState extends State<Tooltip> {
...
@@ -105,21 +106,8 @@ class _TooltipState extends State<Tooltip> {
}
}
void
_handleStatusChanged
(
AnimationStatus
status
)
{
void
_handleStatusChanged
(
AnimationStatus
status
)
{
switch
(
status
)
{
if
(
status
==
AnimationStatus
.
dismissed
)
case
AnimationStatus
.
completed
:
_removeEntry
();
assert
(
_entry
!=
null
);
assert
(
_timer
==
null
);
resetShowTimer
();
break
;
case
AnimationStatus
.
dismissed
:
assert
(
_entry
!=
null
);
assert
(
_timer
==
null
);
_entry
.
remove
();
_entry
=
null
;
break
;
default
:
break
;
}
}
}
@override
@override
...
@@ -134,61 +122,58 @@ class _TooltipState extends State<Tooltip> {
...
@@ -134,61 +122,58 @@ class _TooltipState extends State<Tooltip> {
_entry
.
markNeedsBuild
();
_entry
.
markNeedsBuild
();
}
}
void
resetShowTimer
()
{
void
ensureTooltipVisible
()
{
assert
(
_controller
.
status
==
AnimationStatus
.
completed
);
if
(
_entry
!=
null
)
assert
(
_entry
!=
null
);
return
;
// Already visible.
_timer
=
new
Timer
(
_kShowDuration
,
hideTooltip
);
RenderBox
box
=
context
.
findRenderObject
();
Point
target
=
box
.
localToGlobal
(
box
.
size
.
center
(
Point
.
origin
));
_entry
=
new
OverlayEntry
(
builder:
(
BuildContext
context
)
{
return
new
_TooltipOverlay
(
message:
config
.
message
,
height:
config
.
height
,
padding:
config
.
padding
,
animation:
new
CurvedAnimation
(
parent:
_controller
,
curve:
Curves
.
ease
),
target:
target
,
verticalOffset:
config
.
verticalOffset
,
preferBelow:
config
.
preferBelow
);
});
Overlay
.
of
(
context
,
debugRequiredFor:
config
).
insert
(
_entry
);
GestureBinding
.
instance
.
pointerRouter
.
addGlobalRoute
(
_handlePointerEvent
);
_controller
.
forward
();
}
}
void
showTooltip
()
{
void
_removeEntry
()
{
if
(
_entry
==
null
)
{
assert
(
_entry
!=
null
);
RenderBox
box
=
context
.
findRenderObject
();
Point
target
=
box
.
localToGlobal
(
box
.
size
.
center
(
Point
.
origin
));
_entry
=
new
OverlayEntry
(
builder:
(
BuildContext
context
)
{
return
new
_TooltipOverlay
(
message:
config
.
message
,
height:
config
.
height
,
padding:
config
.
padding
,
animation:
new
CurvedAnimation
(
parent:
_controller
,
curve:
Curves
.
ease
),
target:
target
,
verticalOffset:
config
.
verticalOffset
,
preferBelow:
config
.
preferBelow
);
});
Overlay
.
of
(
context
,
debugRequiredFor:
config
).
insert
(
_entry
);
}
_timer
?.
cancel
();
_timer
?.
cancel
();
if
(
_controller
.
status
!=
AnimationStatus
.
completed
)
{
_timer
=
null
;
_timer
=
null
;
_entry
.
remove
();
_controller
.
forward
();
_entry
=
null
;
}
else
{
GestureBinding
.
instance
.
pointerRouter
.
removeGlobalRoute
(
_handlePointerEvent
);
resetShowTimer
();
}
}
}
void
hideTooltip
(
)
{
void
_handlePointerEvent
(
PointerEvent
event
)
{
assert
(
_entry
!=
null
);
assert
(
_entry
!=
null
);
_timer
?.
cancel
();
if
(
event
is
PointerUpEvent
||
event
is
PointerCancelEvent
)
_timer
=
null
;
_timer
=
new
Timer
(
_kShowDuration
,
_controller
.
reverse
);
_controller
.
reverse
();
else
if
(
event
is
PointerDownEvent
)
_controller
.
reverse
();
}
}
@override
@override
void
deactivate
()
{
void
deactivate
()
{
if
(
_entry
!=
null
)
if
(
_entry
!=
null
)
hideTooltip
();
_controller
.
reverse
();
super
.
deactivate
();
super
.
deactivate
();
}
}
@override
@override
void
dispose
()
{
void
dispose
()
{
_controller
.
stop
();
if
(
_entry
!=
null
)
_entry
?.
remove
();
_removeEntry
();
_entry
=
null
;
assert
(
_timer
==
null
);
super
.
dispose
();
super
.
dispose
();
}
}
...
@@ -197,7 +182,7 @@ class _TooltipState extends State<Tooltip> {
...
@@ -197,7 +182,7 @@ class _TooltipState extends State<Tooltip> {
assert
(
Overlay
.
of
(
context
,
debugRequiredFor:
config
)
!=
null
);
assert
(
Overlay
.
of
(
context
,
debugRequiredFor:
config
)
!=
null
);
return
new
GestureDetector
(
return
new
GestureDetector
(
behavior:
HitTestBehavior
.
opaque
,
behavior:
HitTestBehavior
.
opaque
,
onLongPress:
showTooltip
,
onLongPress:
ensureTooltipVisible
,
excludeFromSemantics:
true
,
excludeFromSemantics:
true
,
child:
new
Semantics
(
child:
new
Semantics
(
label:
config
.
message
,
label:
config
.
message
,
...
...
packages/flutter/test/material/tooltip_test.dart
View file @
b8fb46e4
...
@@ -57,7 +57,7 @@ void main() {
...
@@ -57,7 +57,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -105,7 +105,7 @@ void main() {
...
@@ -105,7 +105,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -154,7 +154,7 @@ void main() {
...
@@ -154,7 +154,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -205,7 +205,7 @@ void main() {
...
@@ -205,7 +205,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
// we try to put it here but it doesn't fit:
// we try to put it here but it doesn't fit:
...
@@ -267,7 +267,7 @@ void main() {
...
@@ -267,7 +267,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -317,7 +317,7 @@ void main() {
...
@@ -317,7 +317,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -369,7 +369,7 @@ void main() {
...
@@ -369,7 +369,7 @@ void main() {
]
]
)
)
);
);
(
key
.
currentState
as
dynamic
).
showTooltip
();
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// before using "as dynamic" in your code, see note top of file
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
/********************* 800x600 screen
/********************* 800x600 screen
...
@@ -434,7 +434,7 @@ void main() {
...
@@ -434,7 +434,7 @@ void main() {
client
.
updates
.
clear
();
client
.
updates
.
clear
();
// before using "as dynamic" in your code, see note top of file
// before using "as dynamic" in your code, see note top of file
(
key
.
currentState
as
dynamic
).
showTooltip
();
// this triggers a rebuild of the semantics because the tree changes
(
key
.
currentState
as
dynamic
).
ensureTooltipVisible
();
// this triggers a rebuild of the semantics because the tree changes
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
await
tester
.
pump
(
const
Duration
(
seconds:
2
));
// faded in, show timer started (and at 0.0)
expect
(
client
.
updates
.
length
,
equals
(
2
));
expect
(
client
.
updates
.
length
,
equals
(
2
));
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment