Come si esegue l'effetto "vetro smerigliato" in Flutter?


99

Sto scrivendo un'app Flutter e vorrei utilizzare / implementare l'effetto "vetro smerigliato" comune su iOS. Come faccio a fare questo?


1
Scrivo un articolo per mostrare come rendere l'effetto sfocato su Flutter usando BackdropFilter & ImageFilter - leggilo su Medium
anticafe

Puoi usare il pacchetto blurrycontainer .
Jon

Risposte:


172

È possibile utilizzare il widget BackdropFilter per ottenere questo effetto.

immagine dello schermo

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
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Come farei in modo che l'effetto smerigliato copra l'intera larghezza / altezza dell'app?
Pieter


2
oppure, se stai cercando di utilizzare l'effetto vetro smerigliato come barriera modale per i dialoghi, puoi modificare la tua copia di ModalBarrier per includere un BackdropFilter. github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…
Collin Jackson,

Sfortunatamente l'effetto sfocatura non funziona sui dispositivi iOS: github.com/flutter/flutter/issues/10284
Mark

3
iirc, il problema precedente è stato risolto e l'effetto sfocatura ora funziona sui dispositivi iOS :)
loganrussell48

12

Penso di non conoscere il significato esatto di "Frosted" (Se il mio esempio non ha funzionato qui),

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,
            ),
          ),
        ],
      ),
    );
  }
}

Risultato:

inserisci qui la descrizione dell'immagine

Spero che questo possa aiutare qualcuno.


1
totalmente aiutato. Ho completamente dimenticato l'opzione "Stack" ... grazie mille.
AhabLives

come puoi fare in modo che la glassa segua la forma di un contenitore principale? mostra ancora rettangolare quando viene aggiunto all'interno di un contenitore di forma circolare
Kaki Master Of Time

@KakiMasterOfTime Penso di non aver ricevuto correttamente la tua domanda. Ma se fai circolare la forma del contenitore rectShape rimuovendo borderRadius, funzionerà.
Blasanka

1
Mi piace la citazione :-)
santanu bera il

0
BackdropFilter(
  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
  child: Container(
    color: Colors.black.withOpacity(_opacity),
  ),
),
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.