Committed by
GitHub
Fix the system UI overlay style in the `CupertinoModalBottomSheetRoute` (#434)
* Fix the system UI overlay style in the `CupertinoModalBottomSheetRoute` * Fix background color * Reduce rebuilds --------- Co-authored-by: Jonas Wanke <contact@jonas-wanke.com>
Showing
2 changed files
with
54 additions
and
47 deletions
@@ -269,47 +269,53 @@ class _CupertinoModalTransition extends StatelessWidget { | @@ -269,47 +269,53 @@ class _CupertinoModalTransition extends StatelessWidget { | ||
269 | curve: animationCurve ?? Curves.easeOut, | 269 | curve: animationCurve ?? Curves.easeOut, |
270 | ); | 270 | ); |
271 | 271 | ||
272 | - return AnimatedBuilder( | ||
273 | - animation: curvedAnimation, | ||
274 | - child: body, | ||
275 | - builder: (context, child) { | ||
276 | - final progress = curvedAnimation.value; | ||
277 | - final yOffset = progress * paddingTop; | ||
278 | - final scale = 1 - progress / 10; | ||
279 | - final radius = progress == 0 | ||
280 | - ? 0.0 | ||
281 | - : (1 - progress) * startRoundCorner + progress * topRadius.x; | ||
282 | - return Stack( | ||
283 | - children: <Widget>[ | ||
284 | - Container(color: backgroundColor), | ||
285 | - Transform.translate( | ||
286 | - offset: Offset(0, yOffset), | ||
287 | - child: Transform.scale( | ||
288 | - scale: scale, | ||
289 | - alignment: Alignment.topCenter, | ||
290 | - child: ClipRRect( | ||
291 | - borderRadius: BorderRadius.circular(radius), | ||
292 | - child: CupertinoUserInterfaceLevel( | ||
293 | - data: CupertinoUserInterfaceLevelData.elevated, | ||
294 | - child: Builder( | ||
295 | - builder: (context) => CupertinoTheme( | ||
296 | - data: createPreviousRouteTheme( | ||
297 | - context, | ||
298 | - curvedAnimation, | ||
299 | - ), | ||
300 | - child: CupertinoUserInterfaceLevel( | ||
301 | - data: CupertinoUserInterfaceLevelData.base, | 272 | + return AnnotatedRegion( |
273 | + // Make sure to match the system UI overlay style to the background color | ||
274 | + // we insert below. Since all other content is pushed down, the background | ||
275 | + // color will always be the one visible behind the status bar. | ||
276 | + value: overlayStyleFromColor(backgroundColor), | ||
277 | + child: Stack( | ||
278 | + children: [ | ||
279 | + Positioned.fill(child: ColoredBox(color: backgroundColor)), | ||
280 | + AnimatedBuilder( | ||
281 | + animation: curvedAnimation, | ||
282 | + child: CupertinoUserInterfaceLevel( | ||
283 | + data: CupertinoUserInterfaceLevelData.base, | ||
284 | + child: body, | ||
285 | + ), | ||
286 | + builder: (context, child) { | ||
287 | + final progress = curvedAnimation.value; | ||
288 | + final yOffset = progress * paddingTop; | ||
289 | + final scale = 1 - progress / 10; | ||
290 | + final radius = progress == 0 | ||
291 | + ? 0.0 | ||
292 | + : (1 - progress) * startRoundCorner + progress * topRadius.x; | ||
293 | + return Transform.translate( | ||
294 | + offset: Offset(0, yOffset), | ||
295 | + child: Transform.scale( | ||
296 | + scale: scale, | ||
297 | + alignment: Alignment.topCenter, | ||
298 | + child: ClipRRect( | ||
299 | + borderRadius: BorderRadius.circular(radius), | ||
300 | + child: CupertinoUserInterfaceLevel( | ||
301 | + data: CupertinoUserInterfaceLevelData.elevated, | ||
302 | + child: Builder( | ||
303 | + builder: (context) => CupertinoTheme( | ||
304 | + data: createPreviousRouteTheme( | ||
305 | + context, | ||
306 | + curvedAnimation, | ||
307 | + ), | ||
302 | child: child!, | 308 | child: child!, |
303 | ), | 309 | ), |
304 | ), | 310 | ), |
305 | ), | 311 | ), |
306 | ), | 312 | ), |
307 | ), | 313 | ), |
308 | - ), | ||
309 | - ), | ||
310 | - ], | ||
311 | - ); | ||
312 | - }, | 314 | + ); |
315 | + }, | ||
316 | + ), | ||
317 | + ], | ||
318 | + ), | ||
313 | ); | 319 | ); |
314 | } | 320 | } |
315 | 321 |
@@ -63,26 +63,26 @@ packages: | @@ -63,26 +63,26 @@ packages: | ||
63 | dependency: transitive | 63 | dependency: transitive |
64 | description: | 64 | description: |
65 | name: leak_tracker | 65 | name: leak_tracker |
66 | - sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa" | 66 | + sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" |
67 | url: "https://pub.dev" | 67 | url: "https://pub.dev" |
68 | source: hosted | 68 | source: hosted |
69 | - version: "10.0.0" | 69 | + version: "10.0.4" |
70 | leak_tracker_flutter_testing: | 70 | leak_tracker_flutter_testing: |
71 | dependency: transitive | 71 | dependency: transitive |
72 | description: | 72 | description: |
73 | name: leak_tracker_flutter_testing | 73 | name: leak_tracker_flutter_testing |
74 | - sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0 | 74 | + sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" |
75 | url: "https://pub.dev" | 75 | url: "https://pub.dev" |
76 | source: hosted | 76 | source: hosted |
77 | - version: "2.0.1" | 77 | + version: "3.0.3" |
78 | leak_tracker_testing: | 78 | leak_tracker_testing: |
79 | dependency: transitive | 79 | dependency: transitive |
80 | description: | 80 | description: |
81 | name: leak_tracker_testing | 81 | name: leak_tracker_testing |
82 | - sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47 | 82 | + sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3" |
83 | url: "https://pub.dev" | 83 | url: "https://pub.dev" |
84 | source: hosted | 84 | source: hosted |
85 | - version: "2.0.1" | 85 | + version: "3.0.1" |
86 | lints: | 86 | lints: |
87 | dependency: "direct dev" | 87 | dependency: "direct dev" |
88 | description: | 88 | description: |
@@ -111,10 +111,10 @@ packages: | @@ -111,10 +111,10 @@ packages: | ||
111 | dependency: transitive | 111 | dependency: transitive |
112 | description: | 112 | description: |
113 | name: meta | 113 | name: meta |
114 | - sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04 | 114 | + sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" |
115 | url: "https://pub.dev" | 115 | url: "https://pub.dev" |
116 | source: hosted | 116 | source: hosted |
117 | - version: "1.11.0" | 117 | + version: "1.12.0" |
118 | path: | 118 | path: |
119 | dependency: transitive | 119 | dependency: transitive |
120 | description: | 120 | description: |
@@ -172,10 +172,10 @@ packages: | @@ -172,10 +172,10 @@ packages: | ||
172 | dependency: transitive | 172 | dependency: transitive |
173 | description: | 173 | description: |
174 | name: test_api | 174 | name: test_api |
175 | - sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b" | 175 | + sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" |
176 | url: "https://pub.dev" | 176 | url: "https://pub.dev" |
177 | source: hosted | 177 | source: hosted |
178 | - version: "0.6.1" | 178 | + version: "0.7.0" |
179 | vector_math: | 179 | vector_math: |
180 | dependency: transitive | 180 | dependency: transitive |
181 | description: | 181 | description: |
@@ -188,9 +188,10 @@ packages: | @@ -188,9 +188,10 @@ packages: | ||
188 | dependency: transitive | 188 | dependency: transitive |
189 | description: | 189 | description: |
190 | name: vm_service | 190 | name: vm_service |
191 | - sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957 | 191 | + sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" |
192 | url: "https://pub.dev" | 192 | url: "https://pub.dev" |
193 | source: hosted | 193 | source: hosted |
194 | - version: "13.0.0" | 194 | + version: "14.2.1" |
195 | sdks: | 195 | sdks: |
196 | dart: ">=3.3.0 <4.0.0" | 196 | dart: ">=3.3.0 <4.0.0" |
197 | + flutter: ">=3.18.0-18.0.pre.54" |
-
Please register or login to post a comment