Skip to content

Instantly share code, notes, and snippets.

@flar
Last active June 22, 2020 19:47
Show Gist options
  • Save flar/1cafb43533652e8e16ea224d93c8a1ec to your computer and use it in GitHub Desktop.
Save flar/1cafb43533652e8e16ea224d93c8a1ec to your computer and use it in GitHub Desktop.
Flutter app to demonstrate performance value of ImageFiltered over BackdropFilter. On a Moto G4 the app runs at about 29ms/frame with the BackdropFilter and around 6ms/frame with the ImageFiltered widget.
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ImageFiltered Performance Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
bool _useImageFiltered = false;
AnimationController _controller;
@override
initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_controller.repeat();
}
@override
dispose() {
_controller.dispose();
super.dispose();
}
Widget buildWithBlurredBackground({Widget bg, Widget fg}) {
return _useImageFiltered
? buildWithImageFiltered(bg, fg)
: buildWithBackdropFilter(bg, fg)
;
}
Widget buildWithImageFiltered(Widget bg, Widget fg) {
return Stack(
children: <Widget>[
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: bg,
),
fg,
],
);
}
Widget buildWithBackdropFilter(Widget bg, Widget fg) {
return Stack(
children: <Widget>[
bg,
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: fg,
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: buildWithBlurredBackground(
bg: Text('background' * 100,
style: TextStyle(
fontSize: 32,
color: Colors.blue,
),
),
fg: AnimatedBuilder(
animation: _controller,
builder: (BuildContext c, Widget w) {
final int val = (_controller.value * 255).round();
return Center(
child: RepaintBoundary(
child: Container(
width: 100,
height: 100,
color: Color.fromARGB(0xff, val, val, val),
),
),
);
},
),
),
bottomNavigationBar: BottomAppBar(
child: Row(
children: <Widget>[
Text('Use Imagefiltered: '),
Checkbox(
onChanged: (b) => setState(() { _useImageFiltered = b; }),
value: _useImageFiltered,
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment