iirc, o problema acima foi resolvido e o efeito de desfoque funciona em dispositivos iOS agora :)
loganrussell48
14
Acho que não sei o significado exato de 'Frosted' (se meu exemplo não funcionou aqui),
import'package:flutter/material.dart';
import'dart:ui'as ui;
void main() => runApp(
MaterialApp(
title: "Frosted glass",
home: new HomePage()
)
);
classHomePageextendsStatelessWidget{
@override
Widget build(BuildContext context) {
returnnew Scaffold(
body: new Stack(
fit: StackFit.expand,
children: <Widget>[
generateBluredImage(),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
rectShapeContainer(),
],
),
],
),
);
}
Widget generateBluredImage() {
returnnew Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/huxley-lsd.png'),
fit: BoxFit.cover,
),
),
//I blured the parent container to blur background image, you can get rid of this part
child: new BackdropFilter(
filter: new ui.ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: new Container(
//you can change opacity with color here(I used black) for background.
decoration: new BoxDecoration(color: Colors.black.withOpacity(0.2)),
),
),
);
}
Widget rectShapeContainer() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0),
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
//you can get rid of below line also
borderRadius: new BorderRadius.circular(10.0),
//below line is for rectangular shape
shape: BoxShape.rectangle,
//you can change opacity with color here(I used black) for rect
color: Colors.black.withOpacity(0.5),
//I added some shadow, but you can remove boxShadow also.
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black26,
blurRadius: 5.0,
offset: new Offset(5.0, 5.0),
),
],
),
child: new Column(
children: <Widget>[
new Text(
'There\'s only one corner of the universe you can be certain of improving and that\'s your own self.',
style: new TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
],
),
);
}
}
totalmente ajudado. Esqueci completamente a opção 'Pilha' ... muito obrigado.
AhabLives
como você pode fazer o glacê seguir a forma de um recipiente de pai? ainda mostra retângulo quando adicionado dentro de um contêiner de forma circular
Kaki Master Of Time
@KakiMasterOfTime Acho que não entendi sua pergunta corretamente. Mas se você transformar a forma do contêiner rectShape em um círculo removendo borderRadius, ela funcionará.
Respostas:
Você pode usar o widget BackdropFilter para obter esse efeito.
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 ), ), ), ), ), ), ], ), ); } }
fonte
Acho que não sei o significado exato de 'Frosted' (se meu exemplo não funcionou aqui),
import 'package:flutter/material.dart'; import 'dart:ui' as ui; void main() => runApp( MaterialApp( title: "Frosted glass", home: new HomePage() ) ); class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( body: new Stack( fit: StackFit.expand, children: <Widget>[ generateBluredImage(), new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ rectShapeContainer(), ], ), ], ), ); } Widget generateBluredImage() { return new Container( decoration: new BoxDecoration( image: new DecorationImage( image: new AssetImage('assets/images/huxley-lsd.png'), fit: BoxFit.cover, ), ), //I blured the parent container to blur background image, you can get rid of this part child: new BackdropFilter( filter: new ui.ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), child: new Container( //you can change opacity with color here(I used black) for background. decoration: new BoxDecoration(color: Colors.black.withOpacity(0.2)), ), ), ); } Widget rectShapeContainer() { return Container( margin: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0), padding: const EdgeInsets.all(15.0), decoration: new BoxDecoration( //you can get rid of below line also borderRadius: new BorderRadius.circular(10.0), //below line is for rectangular shape shape: BoxShape.rectangle, //you can change opacity with color here(I used black) for rect color: Colors.black.withOpacity(0.5), //I added some shadow, but you can remove boxShadow also. boxShadow: <BoxShadow>[ new BoxShadow( color: Colors.black26, blurRadius: 5.0, offset: new Offset(5.0, 5.0), ), ], ), child: new Column( children: <Widget>[ new Text( 'There\'s only one corner of the universe you can be certain of improving and that\'s your own self.', style: new TextStyle( color: Colors.white, fontSize: 20.0, ), ), ], ), ); } }
Resultado:
Espero que isso ajude alguém.
fonte
fonte