If you want to do the “frosted glass” effect in Flutter? You can use the BackdropFilter widget to achieve this effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 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 new Scaffold( body: new Stack( children: <Widget>[ new ConstrainedBox( constraints: const BoxConstraints.expand(), child: new FlutterLogo() ), new Center( child: new ClipRect( child: new BackdropFilter( filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: new Container( width: 200.0, height: 200.0, decoration: new BoxDecoration( color: Colors.grey.shade200.withOpacity(0.5) ), child: new Center( child: new Text( 'Frosted', style: Theme.of(context).textTheme.display3 ), ), ), ), ), ), ], ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
