I'm writing a Flutter app, and I'd like to use/implement the "frosted glass" effect that's common on iOS. How do I do this?
You can use the BackdropFilter widget to achieve this effect.
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new FrostedDemo()));
}
class FrostedDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: FlutterLogo()
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5)
),
child: Center(
child: Text(
'Frosted',
style: Theme.of(context).textTheme.headlineLarge
),
),
),
),
),
),
],
),
);
}
}