Flutterで「すりガラス」効果を行うにはどうすればよいですか?


99

Flutterアプリを作成していますが、iOSで一般的な「すりガラス」効果を使用/実装したいと思います。どうすればよいですか?


1
私はBackdropFilter&のImageFilterを使用してフラッターにぼかし効果を作る方法を示すために記事を書く-それを読む媒体に
anticafe

あなたはblurrycontainerパッケージを使うことができます。
ジョン

回答:


172

BackdropFilterウィジェットを使用して、この効果を実現できます。

スクリーンショット

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

つや消し効果でアプリの幅/高さ全体をカバーするにはどうすればよいですか?
ピーター


2
または、すりガラス効果をダイアログのモーダルバリアとして使用しようとしている場合は、ModalBarrierのコピーを変更してBackdropFilterを含めることができます。github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…–
コリンジャクソン

残念ながら、ぼかし効果はiOSデバイスでは機能しません:github.com/flutter/flutter/issues/10284
Mark

3
iirc、上記の問題は解決され、ぼかし効果はiOSデバイスで機能するようになりました:)
loganrussell48 2018

11

'Frosted'の正確な意味がわからないと思います(私の例がここで機能しなかった場合)、

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

結果:

ここに画像の説明を入力してください

これが誰かの助けになることを願っています。


1
完全に助けた。「スタック」オプションを完全に忘れました...大いに感謝します。
ahabLives 2018年

どうすればフロスティングを親コンテナの形状に合わせることができますか?円形のコンテナ内に追加すると、まだ長方形が表示されます
Kaki Master

@KakiMasterOfTime私はあなたの質問をきちんと得られなかったと思います。ただし、borderRadiusを削除してrectShapeコンテナの形状を円形にすると、機能します。
ブラサンカ

1
私は引用が好きです
santanu bera

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.