flutter 抖动:如果用作背景,ImageFilter.blur和BackdropFilter是否昂贵

yqyhoc1h  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(203)

我正在制作一个带有玻璃效果的flutter应用程序,所以我在每个屏幕上都使用了***ImageFilter. blur和BackdropFilter***。
演出这么贵吗?
这是密码

body: SizedBox(
          width: screenWidth,
          height: screenHeight,
          child: Stack(
            children: [
              Positioned(
                top: screenHeight * 0.1,
                left: -128,
                child: Container(
                  height: 186,
                  width: 186,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromARGB(255, 15, 196, 206),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 200,
                      sigmaY: 200,
                    ),
                    child: Container(
                      height: 166,
                      width: 166,
                      color: const Color.fromARGB(0, 145, 62, 62),
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: screenHeight * 0.1,
                right: -128,
                child: Container(
                  height: 186,
                  width: 186,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromARGB(255, 15, 196, 206),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 200,
                      sigmaY: 200,
                    ),
                    child: Container(
                      height: 166,
                      width: 166,
                      color: const Color.fromARGB(0, 145, 62, 62),
                    ),
                  ),
                ),
              ),
              Positioned(
                child: Container(
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                        opacity: 0.1,
                        image: AssetImage('assets/images/logo.png')),
                  ),
                ),
              )

这是每个屏幕的背景。
如果这不是一个好的方法,那什么才是?
使用MediaQuery查询高度和宽度是否也会降低性能?
非常感谢
我尝试了上面的代码,应用程序对于Flutter发布来说有点慢,这是原因还是我应该去别的地方看看。

2uluyalo

2uluyalo1#

您能否尝试一下,看看这是否是您想要实现的目标

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          useMaterial3: true,
        ),
        home: const MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final screenWidth = mediaQuery.size.width;
    final screenHeight = mediaQuery.size.height;

    return Scaffold(
      body: SizedBox(
        width: screenWidth,
        height: screenHeight,
        child: Stack(
          children: [
            Positioned(
              top: screenHeight * 0.1,
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                    sigmaX: 150, sigmaY: 150, tileMode: TileMode.decal),
                child: Transform.translate(
                  offset: const Offset(-128, 0),
                  child: const DecoratedBox(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color.fromARGB(255, 15, 196, 206),
                    ),
                    child: SizedBox(
                      height: 186,
                      width: 186,
                    ),
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: screenHeight * 0.1,
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                    sigmaX: 150, sigmaY: 150, tileMode: TileMode.decal),
                child: Transform.translate(
                  offset: Offset(screenWidth + 128 - 186, 0),
                  child: const DecoratedBox(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color.fromARGB(255, 15, 196, 206),
                    ),
                    child: SizedBox(
                      height: 186,
                      width: 186,
                    ),
                  ),
                ),
              ),
            ),
            const Positioned(
              child: DecoratedBox(
                decoration: BoxDecoration(
                  image: DecorationImage(
                      opacity: 0.1,
                      image: AssetImage('assets/images/logo.png')),
                ),
                child: SizedBox.expand(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

相关问题