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
5df335ad
Unverified
Commit
5df335ad
authored
Nov 18, 2020
by
MH Johnson
Committed by
GitHub
Nov 18, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[Material] Add method to get dark mode overlay color without needing BuildContext (#70669)
parent
178b4b83
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
47 additions
and
2 deletions
+47
-2
elevation_overlay.dart
packages/flutter/lib/src/material/elevation_overlay.dart
+18
-2
material_test.dart
packages/flutter/test/material/material_test.dart
+29
-0
No files found.
packages/flutter/lib/src/material/elevation_overlay.dart
View file @
5df335ad
...
...
@@ -48,7 +48,7 @@ class ElevationOverlay {
theme
.
applyElevationOverlayColor
&&
theme
.
brightness
==
Brightness
.
dark
&&
color
.
withOpacity
(
1.0
)
==
theme
.
colorScheme
.
surface
.
withOpacity
(
1.0
))
{
return
Color
.
alphaBlend
(
overlayColor
(
context
,
elevation
),
color
);
return
colorWithOverlay
(
color
,
theme
.
colorScheme
.
onSurface
,
elevation
);
}
return
color
;
}
...
...
@@ -62,10 +62,26 @@ class ElevationOverlay {
/// specifies the exact overlay values for a given elevation.
static
Color
overlayColor
(
BuildContext
context
,
double
elevation
)
{
final
ThemeData
theme
=
Theme
.
of
(
context
);
return
_overlayColor
(
theme
.
colorScheme
.
onSurface
,
elevation
);
}
/// Returns a color blended by laying a semi-transparent overlay (using the
/// [overlay] color) on top of a surface (using the [surface] color).
///
/// The opacity of the overlay depends on [elevation]. As [elevation]
/// increases, the opacity will also increase.
///
/// See https://material.io/design/color/dark-theme.html#properties.
static
Color
colorWithOverlay
(
Color
surface
,
Color
overlay
,
double
elevation
)
{
return
Color
.
alphaBlend
(
_overlayColor
(
overlay
,
elevation
),
surface
);
}
/// Applies an opacity to [color] based on [elevation].
static
Color
_overlayColor
(
Color
color
,
double
elevation
)
{
// Compute the opacity for the given elevation
// This formula matches the values in the spec:
// https://material.io/design/color/dark-theme.html#properties
final
double
opacity
=
(
4.5
*
math
.
log
(
elevation
+
1
)
+
2
)
/
100.0
;
return
theme
.
colorScheme
.
onSurface
.
withOpacity
(
opacity
);
return
color
.
withOpacity
(
opacity
);
}
}
packages/flutter/test/material/material_test.dart
View file @
5df335ad
...
...
@@ -362,6 +362,35 @@ void main() {
expect
(
model
.
color
,
equals
(
surfaceColorWithOverlay
));
expect
(
model
.
color
,
isNot
(
equals
(
surfaceColor
)));
});
testWidgets
(
'Expected overlay color can be computed using colorWithOverlay'
,
(
WidgetTester
tester
)
async
{
const
Color
surfaceColor
=
Color
(
0xFF123456
);
const
Color
onSurfaceColor
=
Color
(
0xFF654321
);
const
double
elevation
=
8.0
;
final
Color
surfaceColorWithOverlay
=
ElevationOverlay
.
colorWithOverlay
(
surfaceColor
,
onSurfaceColor
,
elevation
);
await
tester
.
pumpWidget
(
Theme
(
data:
ThemeData
(
applyElevationOverlayColor:
true
,
colorScheme:
const
ColorScheme
.
dark
(
surface:
surfaceColor
,
onSurface:
onSurfaceColor
,
),
),
child:
buildMaterial
(
color:
surfaceColor
,
elevation:
elevation
,
),
),
);
final
RenderPhysicalShape
model
=
getModel
(
tester
);
expect
(
model
.
color
,
equals
(
surfaceColorWithOverlay
));
expect
(
model
.
color
,
isNot
(
equals
(
surfaceColor
)));
});
});
group
(
'Transparency clipping'
,
()
{
...
...
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