Jonah Williams
c4c545215a
Support backdrop key in flutter framework. (#157278)
The backdrop key functionality allows multiple backdrop filters to share the same input filter, dramatically improving raster performance. This is only supported on the Impeller backend.
The backdrop key class allocates a new int from a static and passes this to the engine layer. with 64 bit integers, we can allocate many backdrop filter ids per frame and never run out.
See also: https://github.com/flutter/flutter/issues/156455
```dart
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
final _random = Random();
void main() => runApp(const BackdropFilterDemo());
class BackdropFilterDemo extends StatelessWidget {
const BackdropFilterDemo({super.key});
static final listKey = BackdropKey();
static final overlayKey = BackdropKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
ListView.builder(
itemCount: 120, // 60 pairs of red and blue containers
itemBuilder: (context, index) {
return Container(
height: 100,
color: index % 2 == 0 ? Colors.red : Colors.blue,
);
},
),
Center(
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Image.network('https://picsum.photos/400'),
),
),
ListView.separated(
separatorBuilder: (_, __) => const SizedBox(height: 8),
itemBuilder: (context, index) => BlurEffect(
backdropKey: listKey,
child: SizedBox(
height: 50,
child: Center(
child: Text(index.toString(),
style: const TextStyle(color: Colors.white)),
),
),
),
itemCount: 200,
),
Positioned.fill(
bottom: null,
child: BlurEffect(
backdropKey: overlayKey,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.top,
),
child: const SizedBox(height: 45),
),
),
),
Positioned.fill(
top: null,
child: BlurEffect(
backdropKey: overlayKey,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.bottom,
),
child: const SizedBox(height: 50),
),
),
),
],
),
),
);
}
}
class BlurEffect extends StatelessWidget {
final Widget child;
const BlurEffect({
required this.child,
required this.backdropKey,
super.key,
});
final BackdropKey backdropKey;
@override
Widget build(BuildContext context) {
return ClipRect(
child: BackdropFilter(
backdropKey: backdropKey,
filter: ImageFilter.blur(
sigmaX: 40,
sigmaY: 40,
// tileMode: TileMode.mirror,
),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.black.withOpacity(.65)),
child: child,
),
),
);
}
}
```
### Skia
<img src="https://github.com/user-attachments/assets/4c08e92d-f0ba-42b2-a4c4-fc44efbcfae0" width="200"/>
### Impeller
<img src="https://github.com/user-attachments/assets/21e95efd-5e0c-4f41-8f84-af3f0e47d1aa" width="200"/>
2024-10-25 16:27:51 +00:00
..
2024-06-12 20:05:10 +00:00
2024-06-12 20:05:10 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-09-10 15:32:40 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-06-05 15:20:07 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-01-19 18:29:07 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-02-07 10:01:22 -08:00
2023-12-15 14:13:31 -08:00
2024-01-04 23:26:38 +00:00
2024-08-30 09:36:10 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2024-01-19 18:29:07 +00:00
2024-09-03 19:55:12 +00:00
2023-12-15 14:13:31 -08:00
2024-05-13 22:12:49 +00:00
2024-10-25 16:27:51 +00:00
2024-09-26 04:04:24 +00:00
2024-03-18 21:32:22 +00:00
2024-09-10 15:32:40 -07:00
2024-05-13 22:12:49 +00:00
2024-02-29 00:47:55 +00:00
2024-07-31 23:35:24 +00:00
2024-08-15 19:02:23 +00:00
2024-03-24 18:01:17 +00:00
2023-12-15 14:13:31 -08:00
2024-03-24 18:01:17 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-05-28 16:35:29 -07:00
2024-08-14 18:19:17 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-09-10 15:32:40 -07:00
2024-03-26 12:22:57 -07:00
2023-12-15 14:13:31 -08:00
2024-05-20 17:17:55 +00:00
2023-12-15 14:13:31 -08:00
2024-10-18 22:37:51 +00:00
2023-12-15 14:13:31 -08:00
2024-04-03 18:36:19 +00:00
2024-01-26 23:05:53 +00:00
2023-12-15 14:13:31 -08:00
2024-02-17 01:18:33 +00:00
2024-05-25 19:59:19 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-14 14:20:44 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2024-10-17 23:46:25 +00:00
2024-07-09 15:54:17 -07:00
2024-06-12 20:05:10 +00:00
2023-12-15 14:13:31 -08:00
2024-04-09 19:35:07 +00:00
2024-01-03 00:11:18 +00:00
2023-12-15 14:13:31 -08:00
2024-10-23 23:22:15 +00:00
2024-03-25 10:45:02 -07:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2024-05-31 03:50:30 +00:00
2023-12-15 14:13:31 -08:00
2024-05-30 23:00:21 +00:00
2024-05-18 10:41:56 -07:00
2024-07-08 22:51:04 +00:00
2024-08-05 23:04:50 +00:00
2024-01-10 00:17:33 +00:00
2024-09-30 17:19:25 +00:00
2024-09-10 15:32:40 -07:00
2024-06-12 20:05:10 +00:00
2024-06-12 20:05:10 +00:00
2024-06-18 17:52:21 +00:00
2023-12-15 14:13:31 -08:00
2024-09-13 01:24:11 +00:00
2024-06-12 20:05:10 +00:00
2024-02-09 12:37:20 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-06-17 19:59:06 +00:00
2024-09-09 20:35:03 +00:00
2023-12-15 14:13:31 -08:00
2024-10-22 17:53:17 +00:00
2023-12-15 14:13:31 -08:00
2024-09-09 17:30:19 +00:00
2024-09-10 15:32:40 -07:00
2024-01-10 00:17:33 +00:00
2024-02-21 03:14:19 +00:00
2024-08-20 15:33:21 -07:00
2024-08-20 15:33:21 -07:00
2024-03-14 14:20:44 -07:00
2024-10-22 10:22:01 -07:00
2024-10-22 10:22:01 -07:00
2024-09-10 15:32:40 -07:00
2024-10-18 22:37:51 +00:00
2024-01-10 00:17:33 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-10-04 18:59:05 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-09-11 23:59:53 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-09-11 17:34:58 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-06-05 20:51:04 +00:00
2023-12-15 14:13:31 -08:00
2024-06-03 16:45:23 +00:00
2023-12-15 14:13:31 -08:00
2024-09-13 01:24:11 +00:00
2024-07-31 23:35:24 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-01-19 18:29:07 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-07-02 23:01:44 +00:00
2023-12-15 14:13:31 -08:00
2024-03-06 03:23:18 +00:00
2023-12-15 14:13:31 -08:00
2024-01-11 18:26:04 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-19 17:00:24 +00:00
2024-04-03 15:49:38 -07:00
2023-12-15 14:13:31 -08:00
2024-01-26 23:05:53 +00:00
2024-01-16 09:44:49 -08:00
2023-12-15 14:13:31 -08:00
2024-05-28 10:39:30 -07:00
2024-01-29 09:49:44 -08:00
2024-09-27 00:55:31 +00:00
2024-01-31 19:22:07 +00:00
2024-09-27 00:55:31 +00:00
2024-01-26 23:05:53 +00:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2024-10-08 08:19:29 -07:00
2024-07-02 23:01:44 +00:00
2023-12-15 14:13:31 -08:00
2024-06-20 06:44:11 -07:00
2023-12-15 14:13:31 -08:00
2024-03-18 12:45:22 +00:00
2024-01-23 17:16:26 +00:00
2023-12-15 14:13:31 -08:00
2024-08-29 01:59:34 +00:00
2024-08-29 21:49:25 +00:00
2024-02-22 19:16:25 +00:00
2024-05-20 17:43:00 +00:00
2024-03-14 14:20:44 -07:00
2024-02-23 20:06:06 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-08-07 16:45:53 +00:00
2024-01-29 21:21:34 -08:00
2023-12-15 14:13:31 -08:00
2024-05-01 22:05:02 +00:00
2023-12-15 14:13:31 -08:00
2024-06-07 21:27:06 +00:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2023-12-20 22:05:29 +00:00
2024-05-07 09:04:49 -07:00
2024-01-10 00:17:33 +00:00
2023-12-27 19:03:29 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-14 14:20:44 -07:00
2024-10-02 17:18:21 +00:00
2023-12-15 14:13:31 -08:00
2024-05-13 22:12:49 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-01-12 22:10:25 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-07-31 23:35:24 +00:00
2023-12-15 14:13:31 -08:00
2024-10-21 21:29:05 +00:00
2024-10-02 20:08:11 +00:00
2024-08-14 18:19:17 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-02-01 11:49:54 -08:00
2024-03-13 07:10:48 +00:00
2024-01-19 18:29:07 +00:00
2024-03-25 10:45:02 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-06-04 22:02:12 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-05-31 20:30:09 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-02-14 21:08:25 +00:00
2024-01-10 00:17:33 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-02-22 19:16:25 +00:00
2024-04-02 21:10:52 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-06-10 17:52:58 +00:00
2024-10-15 20:58:51 +00:00
2024-04-09 19:35:07 +00:00
2024-10-21 19:25:52 +00:00
2024-09-30 22:44:20 +00:00
2024-04-02 21:10:52 +00:00
2024-10-18 22:37:51 +00:00
2024-10-18 22:37:51 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-05-08 23:12:47 +00:00
2023-12-15 14:13:31 -08:00
2024-10-18 22:37:51 +00:00
2024-10-21 19:25:52 +00:00
2024-10-18 22:37:51 +00:00
2023-12-15 14:13:31 -08:00
2024-07-31 23:35:24 +00:00
2023-12-15 14:13:31 -08:00
2024-10-18 22:37:51 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-05 00:16:21 +00:00
2023-12-15 14:13:31 -08:00
2024-08-15 19:02:23 +00:00
2023-12-15 14:13:31 -08:00
2024-07-23 15:46:08 +00:00
2024-01-10 00:17:33 +00:00
2024-01-24 16:13:26 +00:00
2024-09-24 22:12:32 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-15 10:42:02 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2024-03-13 16:34:25 +00:00
2024-03-06 03:23:18 +00:00
2024-07-08 19:33:14 +00:00
2023-12-15 14:13:31 -08:00
2024-10-24 19:23:07 +00:00
2023-12-15 14:13:31 -08:00
2024-05-28 16:35:29 -07:00
2024-10-21 19:25:52 +00:00
2023-12-15 14:13:31 -08:00
2024-10-17 18:12:18 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-06 03:23:18 +00:00
2024-03-15 10:42:02 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-07-02 23:21:22 +00:00
2023-12-15 14:13:31 -08:00
2024-04-15 16:06:07 +00:00
2024-05-20 17:17:55 +00:00
2024-02-17 01:18:33 +00:00
2023-12-15 14:13:31 -08:00
2024-08-09 13:52:06 -07:00
2024-05-20 17:17:55 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-05-15 16:52:17 -07:00
2024-01-19 18:29:07 +00:00
2024-10-21 16:59:16 +00:00
2024-05-28 16:35:29 -07:00
2024-01-16 21:40:08 +00:00
2024-05-01 20:51:54 +00:00
2023-12-15 14:13:31 -08:00
2024-07-30 01:29:31 +00:00
2023-12-15 14:13:31 -08:00
2024-08-15 23:00:15 +00:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-03-25 10:36:42 -07:00
2023-12-15 14:13:31 -08:00
2024-05-14 13:46:35 -07:00
2024-01-29 21:21:34 -08:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-09-10 15:32:40 -07:00
2024-03-25 10:36:42 -07:00
2023-12-15 14:13:31 -08:00
2024-05-31 20:30:09 +00:00
2024-05-24 16:26:07 +00:00
2024-05-24 16:26:07 +00:00
2024-06-25 21:55:34 -07:00
2023-12-15 14:13:31 -08:00
2023-12-15 14:13:31 -08:00
2024-07-26 00:27:37 +00:00
2023-12-15 14:13:31 -08:00
2024-07-31 23:35:24 +00:00
2024-10-23 12:30:55 -07:00
2024-10-16 20:18:28 +00:00
2024-03-19 17:58:13 +00:00
2024-05-09 20:20:48 -07:00