Como faço o efeito “vidro fosco” no Flutter?

104

Estou escrevendo um aplicativo Flutter e gostaria de usar / implementar o efeito de "vidro fosco" comum no iOS. Como eu faço isso?

Seth Ladd
fonte
1
Escrevo um artigo para mostrar como fazer efeito de desfoque no Flutter usando BackdropFilter e ImageFilter - leia no Medium
anticafe
Você pode usar o pacote blurrycontainer .
Jon

Respostas:

181

Você pode usar o widget BackdropFilter para obter esse efeito.

captura de tela

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
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Collin Jackson
fonte
Como eu faria o efeito fosco cobrir toda a largura / altura do aplicativo?
Pieter
2
ou, se estiver tentando usar o efeito de vidro fosco como uma barreira modal para diálogos, você pode modificar sua cópia do ModalBarrier para incluir um BackdropFilter. github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…
Collin Jackson
Infelizmente, o efeito de desfoque não funciona em dispositivos iOS: github.com/flutter/flutter/issues/10284
Marcos
3
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()
    )
);

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:

insira a descrição da imagem aqui

Espero que isso ajude alguém.

Blasanka
fonte
1
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á.
Blasanka
1
Eu gosto da citação :-)
santanu bera
1
BackdropFilter(
  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
  child: Container(
    color: Colors.black.withOpacity(_opacity),
  ),
),
Mahmoud Hamdy
fonte