Wie mache ich den "Milchglas" -Effekt in Flutter?

93

Ich schreibe eine Flutter-App und möchte den unter iOS üblichen "Milchglas" -Effekt verwenden / implementieren. Wie mache ich das?

Seth Ladd
quelle
1
Ich schreibe einen Artikel, um zu zeigen, wie man mit BackdropFilter &
ImageFilter
Sie können das blurrycontainer- Paket verwenden.
Jon

Antworten:

161

Sie können das BackdropFilter-Widget verwenden , um diesen Effekt zu erzielen.

Bildschirmfoto

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
quelle
Wie würde ich dafür sorgen, dass der Matt-Effekt die gesamte Breite / Höhe der App abdeckt?
Pieter
2
Wenn Sie versuchen, den Milchglaseffekt als modale Barriere für Dialoge zu verwenden, können Sie Ihre Kopie von ModalBarrier so ändern, dass sie einen Hintergrundfilter enthält. github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…
Collin Jackson
Leider ist der Unschärfe - Effekt nicht auf iOS - Geräten: github.com/flutter/flutter/issues/10284
Mark
3
iirc, das obige Problem wurde behoben und der Unschärfeeffekt funktioniert jetzt auf iOS-Geräten :)
loganrussell48
11

Ich glaube, ich kenne die genaue Bedeutung von 'Frosted' nicht (wenn mein Beispiel hier nicht funktioniert hat),

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

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Ich hoffe das wird jemandem helfen.

Blasanka
quelle
1
total geholfen. Ich habe die Option "Stapel" komplett vergessen ... vielen Dank.
AhabLives
Wie kann der Zuckerguss der Form eines übergeordneten Behälters folgen? es zeigt immer noch rechteckig, wenn es in einem kreisförmigen Behälter hinzugefügt wird
Kaki Master Of Time
@KakiMasterOfTime Ich glaube, ich habe deine Frage nicht richtig verstanden. Wenn Sie jedoch die Form des rectShape-Containers durch Entfernen von borderRadius zum Kreis machen, funktioniert dies.
Blasanka
0
BackdropFilter(
  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
  child: Container(
    color: Colors.black.withOpacity(_opacity),
  ),
),
Mahmoud Hamdy
quelle